vue项目下的better-scroll封装

参考官网：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88。

1.下载：npm install --save -better-scroll
2.封装better-scroll组件：在scroll.vue中

<template>
	<div class="bscroll" ref="wrapper">
		<slot></slot>
	</div>
</template>

<script>
	import Bscroll from "better-scroll"
	export default{
		props:{
			probeType:{  //可选值：1、2、3当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
			         	//当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，
			         	//而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件
				type:Number,
				default:1
			},
			click:{  //better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 
				     //参数加一个私有属性 _constructed，值为 true,如果better-scroll里面的标签不能点击触发默认事件，需要在标签标签中添加class='needsclick'
				type:Boolean,
				default:true
			},
			data:{   //存储数据
				type:Array,
				default:()=>[]
			}
		},
		mounted(){  //延迟20ms执行，保证页面加载完成,因为大多浏览器每17ms刷新一次
			setTimeout(()=>{
				this._initScroll()
			},20)
		},
		methods:{
			_initScroll(){ //初始化better-scroll
				if(!this.$refs.wrapper){return}
				this.scroll=new Bscroll(this.$refs.wrapper,{
					probeType:this.probeType,
					click:this.click					
				})
			},
			enable(){  //启用 better-scroll, 默认 开启。
				this.scroll && this.scroll.enable()
			},
			disable(){  //禁用 better-scroll，DOM 事件（如 touchstart、touchmove、touchend）的回调函数不再响应。
				this.scroll && this.scroll.disable()
			},
			refresh(){ //重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
				this.scroll && this.scroll.refresh()
			},
		},
		watch:{
			data(){  //监听传入的data的数据变化时，重新计算 better-scroll，确保滚动的效果正常。
				setTimeout(()=>{
					this.refresh()
				},20)
			}
		}
	}
</script>

<style scoped lang="less">
</style>

3. 调用better-scroll组件：

<template>
	<div class="recommend">
		<scroll-wrapper :data="disLists"   ref ="scroll" class="recommend_wrapper">
			<div>
                 <img :src="item.imgsrc" alt="图片" @load="imgLoad"class="img_box"/>
				//滚动部分
			</div>
		</scroll-wrapper>		
	</div>
</template>

<script>		
	import ScrollWrapper from "_c/base/bscroll/bscroll.vue"
	export default{		
		components:{
			ScrollWrapper
		},
		methods:{
            imgLoad(){ //图片加载完成事件，如果存在多张banner图片，通过this.checkLoad，只需要一张加载完成，撑开高度，就重新计算better-scroll高度
			if(! this.checkLoad){
				this.$refs.scoll.refresh()
				this.checkLoad=true;
			}
		}
        }
	}
</script>

<style scoped lang="less">
.recommend{ #wrapper，也就是父容器，它会有固定的高度。
	position: fixed;
    width: 100%;
    top: 88px;
    bottom: 0;
}
.recommend_wrapper{  #它是父容器的第一个子元素，它的高度会随着内容的大小而撑高
	height: 100%;
	overflow: hidden;
}

</style>

注意：better-scroll只有里面的所有数据完全渲染完，才是最完整的滚动，所有，需要注意，最好在每次所有数据都改变时，都重新计算一次better-scroll