uniapp 监听用户上/下/左/右滑动

最新推荐文章于 2024-08-05 21:09:49 发布

kopppo7

最新推荐文章于 2024-08-05 21:09:49 发布

阅读量1.7k

点赞数 1

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/kopppo7/article/details/130402010

版权

该文章介绍了如何利用HTML5的touch事件处理滑动操作，包括`handleTouchMove`、`handleTouchStart`和`handleTouchEnd`，通过比较触摸开始和移动时的页面Y坐标来判断用户是向上还是向下滑动，从而实现页面交互功能。

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

三个事件

<view
@touchmove="handletouchmove($event)"
@touchstart="handletouchstart"
@touchend="handletouchend"
>

用法

handletouchmove(event) {
    // 左右切换为 X 即可
	let currentY = event.changedTouches[0].pageY;
	let ty = currentY - this.lastY;
	if (ty < -20) {
		// 向上滑动
	} else if (ty > 20) {
		//向下滑动
	}
	//将当前坐标进行保存以进行下一次计算
	this.lastY = currentY;
},

handletouchstart(event) {
	//滑动开始
	this.lastY = event.changedTouches[0].pageY;
},

handletouchend(event) {
	//停止滑动
},