js没有提供页面滑动停止的方法,只有正在滚动的方法.所以需要自己专门写一个关于滚动停止的方法事例代码如下:
data() {
return { lastScroll:0,//记录上一次的滚动位置
timer:''//定时器
}
},
mounted() {
this.box =this.$refs.ct//可以滚动的UI控件
//监听UI控件的滚动,并记录每次滑动距离,每一次滚动就会启动一个延时执行的定时器,滚动停止之后就不会走滑动的回调方法,但是延时方法还会执行,
在延时方法会判断当前滑动位置和上一次滑动位置是否相等,如果相等,则是滚动停止了,为了避免多个定时器,每次滑动的时候都会销毁上次滑动回调生成的定时器
this.box.addEventListener('scroll', () => {
clearTimeout(this.timer)
this.timer =null; this.lastScroll =this.$refs.ct.scrollTop;
//开始滑动
console.log('beginScroll');
this.$emit('beginScroll')
this.timer =setTimeout( ()=> {
if(this.lastScroll ==this.$refs.ct.scrollTop ){
//停止滑动
this.$emit('endScroll')
console.log('endScroll');
}
},100)
}, false)
},
网友评论