最近在uniapp组件中需要监听页面触摸结束的事件,但是框架只提供触摸开始的事件,百度借鉴后完成需求,特此记录,欢迎网友指正和提出不同方案。
1.先监听触摸开始事件,如果是页面可以直接调用“onPageScroll”这个生命周期。如果是组件可以使用“scroll-view”的“@scroll”方法,以这种方法为例:
<scroll-view scroll-y="true" scroll-with-animation="true" @scroll="scrollRoll">
// ...内容
</scroll-view>
2. 监听触摸时设置定时器,如下
let timer = null; //设置全局定时器变量
...内容
// 监听页面滚动
scrollRoll() {
this.isRoll = 1; // 此值为1,说明正在触摸中
clearTimeout(timer); // 每次滚动前 清除上一次触摸设置的定时器
timer = setTimeout(() => { //重新设置一个定时器,刷新时间
this.isRoll = 0; // 此值为0,说明触摸已结束
}, 500); // 500ms内没有触摸,默认结束触摸
}
3. 注意let timer = null; 需要设置成全局变量,默认触摸结束的时间间隔可以调整。
<script>
...
let timer = null; //设置全局定时器变量
...
</script>