UNIAPP----判断手指移动是上滑还是下滑

小小黑007

已于 2023-03-23 17:03:29 修改

阅读量1.2k

点赞数

分类专栏： uni-app 文章标签： uni-app javascript 前端

于 2023-02-08 17:28:07 首次发布

本文链接：https://blog.csdn.net/heavenz19/article/details/128939581

版权

uni-app 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

该文章介绍了如何在uniapp中利用touchstart和touchend事件监听手指滑动，通过比较手指开始和结束时的clientY坐标来判断是上滑还是下滑。当滑动距离超过一定阈值（如50像素）时，会执行相应的处理，例如阻止滑动或触发警告。

摘要由CSDN通过智能技术生成

UNIAPP----判断手指移动是上滑还是下滑

<view @touchstart="fingerstart" @touchend="fingerend">
.......
</view>

data() {
	return {
		clientY: 0, //手指滑动方向
		vertical: true, //是否可以滑动		
	}
},
methods:{
	//一开始手指活动的方向
	fingerstart(e) {
		this.clientY = e.changedTouches[0].clientY
	},
	// 判断页面是上滑还是下滑
	fingerend(e) {
		const subY = e.changedTouches[0].clientY - this.clientY;
		if (subY > 50 || subY < -50) {
			if (!this.vertical) return this.$alert('xxxx！');
		}
	},
}