首页 > 其他分享 >uni-app中左滑右滑页面

uni-app中左滑右滑页面

时间:2023-03-25 13:55:36浏览次数:39  
标签:touches app changedTouches diff 左滑右 uni 页面

在H5项目中有时候会遇到左滑右滑的问题,左滑去上一个页面,右滑去下一个页面

通过以下代码即可实现

<view  @touchstart="touchStart" @touchend="touchEnd"></view>

  下边是js

 touchStart(e){
         if (e.touches.length == 1) {
		this.startX=e.touches[0].clientX;
	 }
},
 touchEnd(e){
         if (e.changedTouches.length == 1) {
		 var endX = e.changedTouches[0].clientX;
		let diff = endX-this.startX;
		 if(Math.abs(diff)>100){
			if(diff>0){
			  //左滑
			}else{
			  //右滑
			}
		}
	}
}

  

标签:touches,app,changedTouches,diff,左滑右,uni,页面
From: https://www.cnblogs.com/bingchenzhilu/p/17254623.html

相关文章