uniapp监控触摸事件结束

最近在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>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值