uniapp实现页面左右滑动，上下滑动事件

最新推荐文章于 2024-08-22 11:53:20 发布

a_靖

最新推荐文章于 2024-08-22 11:53:20 发布

阅读量7.2k

点赞数 1

分类专栏： Web前端 uni-app uniapp框架零基础到开发应用详细教程文章标签：滑动上滑 uniapp自定义滑动事件滑动翻页

本文链接：https://blog.csdn.net/qq_35713752/article/details/115617186

版权

uniapp框架零基础到开发应用详细教程同时被 3 个专栏收录

23 篇文章 138 订阅 ¥49.90 ¥99.00

订阅专栏

Web前端

404 篇文章 25 订阅

订阅专栏

uni-app

86 篇文章 14 订阅

订阅专栏

本文介绍了如何在uniapp中实现页面的左右滑动和上下滑动事件，包括自定义滑动事件和滑动翻页功能。

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

实现代码：

<view class="" @touchstart="touchstart" @touchend="touchend">
</view>

data() {
	return {
		touchData: {}, //滑动事件数据
    }
}
methods: {
	touchstart(e) {
				this.touchData.clientX = e.changedTouches[0].clientX;
				this.touchData.clientY = e.changedTouches[0].clientY;
	},
	touchend(e) {
				const subX = e.changedTouches[0].clientX - this.touchData.clientX;
				const subY = e.changedTouches[0].clientY - this.touchData.clientY;
				if(subY > 50){
					console.log('下滑')
				}
				if(subY < -50){
					console.log('上滑')
				}
				if (subX > 50) {
					console.log('右滑')
				}
				if (subX > -50) {
					console.log('左滑')
				}
	},
}