vue中better-scroll的用法

137 阅读1分钟
	<div class="scroll-wrapper" ref="scroll"> // 列表容器的父元素
		<div class="scroll-content"> // 列表容器,相当于ul
			<div class="item"  
			v-for="(item,index) in lists"
			:key="index"
			@click="clickFn(item)"
			> // 列表元素
			{{item}}
			</div>
		</div>
	</div>
</div>

// script 
methods:{
	init(){ // 初始化better scroll 第一个参数为ul的父元素,第二个参数为配置
		this.bs = new BScroll(this.$refs.scroll,{
			startX:-10, // X轴初始位置
			startY:-100,
			scrollX:false, // X轴可拖动
			scrollY:true,
			tap:true, // 允许的方法 
			click:true,
			bounce:true, // 回弹
			momentum:true,// 阻尼
		})
	}
	bsFn(){
		this.bs.refresh() // 重新计算,是否能滑动以及最大值与最小值
		this.bs.scrollTo(0,-400,5000) (x轴,y轴,动画时间)
		this.bs.scrollBy(0,-400,5000) (x轴,y轴,动画时间) 滑动到差值
		this.bs.scrollToElement(list.children[30],time)
		this.bs.destroy() // 销毁
	}
	bsEvent(){ // 添加绑定事件方法
		this.bs.on('beforeScrollStart',function(){
			console.log('滚动开始之前')
		})
		this.bs.on('scrollStart',function(){
			console.log('开始滚动')
		})
		this.bs.on('scroll',function(e){
			// 	probeType:1,2,3
            // 1:一段时间派发一次 2:滑动过程实时派发 3:惯性过程中也会派发
            console.log(e) // e 为坐标对象
		})
		// 结束时触发
		this.bs.on('scrollEnd',function(e){})
		this.bs.on('touchEnd',function(e){})
		// 轻抚
		this.bs.on('flick',function(e){})
	}
}
// dom挂载后再初始化
mounted(){
	this.init()
}