<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()
}