├── README.md
└── scroll
    └── scroll.vue


/README.md:
--------------------------------------------------------------------------------
1 | # iVue
2 | 
3 | ## vue相关组件
4 | 
5 | 1. 基于[better-scroll](https://github.com/ustbhuangyi/better-scroll)的vue组件[scroll](/scroll/scroll.vue)，参考链接 <http://www.imooc.com/article/18232>


--------------------------------------------------------------------------------
/scroll/scroll.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div ref="wrapper" class="list-wrapper">
  3 |     <div class="scroll-content">
  4 |       <div ref="listWrapper">
  5 |         <slot class="list-content"></slot>
  6 |       </div>
  7 |       <!-- 上拉加载 -->
  8 |       <slot name="pullup" :pullUpLoad="pullUpLoad" :isPullUpLoad="isPullUpLoad">
  9 |         <div class="pullup-wrapper" v-if="pullUpLoad">
 10 |           <div class="before-trigger" v-if="!isPullUpLoad">
 11 |             <span>{{pullUpTxt}}</span>
 12 |           </div>
 13 |           <div class="after-trigger" v-else>
 14 |             <loading></loading>
 15 |           </div>
 16 |         </div>
 17 |       </slot>
 18 |     </div>
 19 |     <!-- 下拉刷新 -->
 20 |     <slot
 21 |       name="pulldown"
 22 |       :pullDownRefresh="pullDownRefresh"
 23 |       :pullDownStyle="pullDownStyle"
 24 |       :beforePullDown="beforePullDown"
 25 |       :isPullingDown="isPullingDown"
 26 |       :bubbleY="bubbleY">
 27 |       <div ref="pulldown" class="pulldown-wrapper" :style="pullDownStyle" v-if="pullDownRefresh">
 28 |         <div class="before-trigger" v-if="beforePullDown">
 29 |           <bubble :y="bubbleY"></bubble>
 30 |         </div>
 31 |         <div class="after-trigger" v-else>
 32 |           <div v-if="isPullingDown" class="loading">
 33 |             <loading></loading>
 34 |           </div>
 35 |           <div v-else><span>{{refreshTxt}}</span></div>
 36 |         </div>
 37 |       </div>
 38 |     </slot>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script>
 43 | /**
 44 |  * 详细参数配置，http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/
 45 |  * 参考链接，http://www.imooc.com/article/18232
 46 |  */
 47 | import BScroll from 'better-scroll'
 48 | import Bubble from './pullDown/bubble'
 49 | import { getRect } from './dom'
 50 | import Loading from './pullDown/loading'
 51 | 
 52 | const DIRECTION_H = 'horizontal'
 53 | const DIRECTION_V = 'vertical'
 54 | 
 55 | export default {
 56 |   name: 'scroll',
 57 |   props: {
 58 |     data: {
 59 |       default: function() {
 60 |         return []
 61 |       }
 62 |     },
 63 |     /**
 64 |      * 1 滚动的时候会派发scroll事件，会截流。
 65 |      * 2 滚动的时候实时派发scroll事件，不会截流。
 66 |      * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
 67 |      */
 68 |     probeType: {
 69 |       type: Number,
 70 |       default: 1
 71 |     },
 72 |     // 点击列表是否派发click事件
 73 |     click: {
 74 |       type: Boolean,
 75 |       default: true
 76 |     },
 77 |     // 是否派发滚动事件
 78 |     listenScroll: {
 79 |       type: Boolean,
 80 |       default: false
 81 |     },
 82 |     // 是否派发 滚动开始之前 事件
 83 |     listenBeforeScroll: {
 84 |       type: Boolean,
 85 |       default: false
 86 |     },
 87 |     // 是否派发 滚动结束 事件
 88 |     listenScrollEnd: {
 89 |       type: Boolean,
 90 |       default: false
 91 |     },
 92 |     // 滚动方向
 93 |     direction: {
 94 |       type: String,
 95 |       default: DIRECTION_V
 96 |     },
 97 |     // 是否 开启滚动条
 98 |     scrollbar: {
 99 |       type: null,
100 |       default: false
101 |     },
102 |     // 下拉刷新配置
103 |     pullDownRefresh: {
104 |       type: null,
105 |       default: false
106 |     },
107 |     // 上拉加载配置
108 |     pullUpLoad: {
109 |       type: null,
110 |       default: false
111 |     },
112 |     // 当数据更新时，滚动条重新刷新的延时
113 |     refreshDelay: {
114 |       type: Number,
115 |       default: 20
116 |     },
117 |     // 是否 支持横向和纵向同时滚动
118 |     freeScroll: {
119 |       type: Boolean,
120 |       default: false
121 |     },
122 |     // PC 端的鼠标滚轮配置
123 |     mouseWheel: {
124 |       type: Boolean,
125 |       default: false
126 |     },
127 |     // 是否回弹
128 |     bounce: {
129 |       default: true
130 |     },
131 |     // 滚动内容的缩放配置
132 |     zoom: {
133 |       default: false
134 |     },
135 |     // 额外配置
136 |     options: {
137 |       type: Object,
138 |       default() { return {} }
139 |     }
140 |   },
141 |   data() {
142 |     return {
143 |       beforePullDown: true,
144 |       isRebounding: false,
145 |       isPullingDown: false,
146 |       isPullUpLoad: false,
147 |       pullUpDirty: true,
148 |       pullDownStyle: '',
149 |       bubbleY: 0
150 |     }
151 |   },
152 |   computed: {
153 |     pullUpTxt() {
154 |       // 上拉加载时的文本提示
155 |       const moreTxt = (this.pullUpLoad && this.pullUpLoad.txt && this.pullUpLoad.txt.more) || this.$t('prompt.loadMore')
156 |       // 没有更多数据时的文本提示
157 |       const noMoreTxt = (this.pullUpLoad && this.pullUpLoad.txt && this.pullUpLoad.txt.noMore) || this.$t('prompt.noMore')
158 | 
159 |       return this.pullUpDirty ? moreTxt : noMoreTxt
160 |     },
161 |     refreshTxt() {
162 |       // 下拉刷新文本提示
163 |       return (this.pullDownRefresh && this.pullDownRefresh.txt) || this.$t('prompt.refreshSuccess')
164 |     }
165 |   },
166 |   created() {
167 |     this.pullDownInitTop = -50
168 |   },
169 |   mounted() {
170 |     setTimeout(() => {
171 |       this.initScroll()
172 |     }, 20)
173 |   },
174 |   destroyed() {
175 |     this.$refs.scroll && this.$refs.scroll.destroy()
176 |   },
177 |   methods: {
178 |     initScroll() {
179 |       if (!this.$refs.wrapper) {
180 |         return
181 |       }
182 |       if (this.$refs.listWrapper && (this.pullDownRefresh || this.pullUpLoad)) {
183 |         this.$refs.listWrapper.style.minHeight = `${getRect(this.$refs.wrapper).height + 1}px`
184 |       }
185 |       const options = Object.assign({
186 |         probeType: this.probeType,
187 |         click: this.click,
188 |         scrollY: this.freeScroll || this.direction === DIRECTION_V,
189 |         scrollX: this.freeScroll || this.direction === DIRECTION_H,
190 |         scrollbar: this.scrollbar,
191 |         pullDownRefresh: this.pullDownRefresh,
192 |         pullUpLoad: this.pullUpLoad,
193 |         freeScroll: this.freeScroll,
194 |         mouseWheel: this.mouseWheel,
195 |         bounce: this.bounce,
196 |         zoom: this.zoom
197 |       }, this.options)
198 |       console.log(options)
199 |       this.scroll = new BScroll(this.$refs.wrapper, options)
200 | 
201 |       if (this.listenScroll) {
202 |         this.scroll.on('scroll', (pos) => {
203 |           this.$emit('scroll', pos)
204 |         })
205 |       }
206 | 
207 |       if (this.listenScrollEnd) {
208 |         this.scroll.on('scrollEnd', (pos) => {
209 |           this.$emit('scroll-end', pos)
210 |         })
211 |       }
212 | 
213 |       if (this.listenBeforeScroll) {
214 |         this.scroll.on('beforeScrollStart', () => {
215 |           this.$emit('beforeScrollStart')
216 |         })
217 | 
218 |         this.scroll.on('scrollStart', () => {
219 |           this.$emit('scroll-start')
220 |         })
221 |       }
222 | 
223 |       if (this.pullDownRefresh) {
224 |         this._initPullDownRefresh()
225 |       }
226 | 
227 |       if (this.pullUpLoad) {
228 |         this._initPullUpLoad()
229 |       }
230 |     },
231 |     disable() {
232 |       this.scroll && this.scroll.disable()
233 |     },
234 |     enable() {
235 |       this.scroll && this.scroll.enable()
236 |     },
237 |     refresh() {
238 |       this.scroll && this.scroll.refresh()
239 |     },
240 |     scrollTo() {
241 |       this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
242 |     },
243 |     scrollToElement() {
244 |       this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
245 |     },
246 |     destroy() {
247 |       this.scroll.destroy()
248 |     },
249 |     forceUpdate(dirty) {
250 |       if (this.pullDownRefresh && this.isPullingDown) {
251 |         this.isPullingDown = false
252 |         this._reboundPullDown().then(() => {
253 |           this._afterPullDown()
254 |         })
255 |       } else if (this.pullUpLoad && this.isPullUpLoad) {
256 |         this.isPullUpLoad = false
257 |         this.scroll.finishPullUp()
258 |         this.pullUpDirty = dirty
259 |         this.refresh()
260 |       } else {
261 |         this.refresh()
262 |       }
263 |     },
264 |     _initPullDownRefresh() {
265 |       this.scroll.on('pullingDown', () => {
266 |         this.beforePullDown = false
267 |         this.isPullingDown = true
268 |         this.$emit('pullingDown')
269 |       })
270 | 
271 |       this.scroll.on('scroll', (pos) => {
272 |         if (!this.pullDownRefresh) {
273 |           return
274 |         }
275 |         if (this.beforePullDown) {
276 |           this.bubbleY = Math.max(0, pos.y + this.pullDownInitTop)
277 |           this.pullDownStyle = `top:${Math.min(pos.y + this.pullDownInitTop, 10)}px`
278 |         } else {
279 |           this.bubbleY = 0
280 |         }
281 | 
282 |         if (this.isRebounding) {
283 |           this.pullDownStyle = `top:${10 - (this.pullDownRefresh.stop || 40 - pos.y)}px`
284 |         }
285 |       })
286 |     },
287 |     _initPullUpLoad() {
288 |       this.scroll.on('pullingUp', () => {
289 |         this.isPullUpLoad = true
290 |         this.$emit('pullingUp')
291 |       })
292 |     },
293 |     _reboundPullDown() {
294 |       const { stopTime = 600 } = this.pullDownRefresh
295 |       return new Promise((resolve) => {
296 |         setTimeout(() => {
297 |           this.isRebounding = true
298 |           this.scroll.finishPullDown()
299 |           resolve()
300 |         }, stopTime)
301 |       })
302 |     },
303 |     _afterPullDown() {
304 |       setTimeout(() => {
305 |         this.pullDownStyle = `top:${this.pullDownInitTop}px`
306 |         this.beforePullDown = true
307 |         this.isRebounding = false
308 |         this.refresh()
309 |       }, this.scroll.options.bounceTime)
310 |     }
311 |   },
312 |   watch: {
313 |     data() {
314 |       setTimeout(() => {
315 |         this.forceUpdate(true)
316 |       }, this.refreshDelay)
317 |     }
318 |   },
319 |   components: {
320 |     Bubble,
321 |     Loading
322 |   }
323 | }
324 | </script>
325 | 
326 | <style rel="stylesheet/scss" lang="scss" scoped>
327 |   .list-wrapper {
328 |     position: relative;
329 |     height: 100%;
330 |     overflow: hidden;
331 |     /*background: #fff;*/
332 |     .scroll-content {
333 |       position: relative;
334 |       z-index: 1;
335 |       .list-content {
336 |         position: relative;
337 |         z-index: 10;
338 |         /*background: #ffffff;*/
339 |       }
340 |       .pullup-wrapper {
341 |         width: 100%;
342 |         display: flex;
343 |         justify-content: center;
344 |         align-items: center;
345 |         padding: 16px 0;
346 |       }
347 |     }
348 |     .pulldown-wrapper {
349 |       position: absolute;
350 |       width: 100%;
351 |       left: 0;
352 |       display: flex;
353 |       justify-content: center;
354 |       align-items: center;
355 |       transition: all;
356 |       .after-trigger {
357 |         margin-top: 10px;
358 |       }
359 |     }
360 |   }
361 | </style>
362 | 


--------------------------------------------------------------------------------