uniapp实现滑动页面切换导航条功能（左右滑动）

在页面最外层元素绑定事件@touchstart="touchStart" @touchend="touchEnd"/*** 触摸开始**/touchStart(e) {this.touchStartX = e.touches[0].clientX;this.touchStartY = e.touches[0].clientY;},/*** 触摸结束**/to..

csdnvsaqin

1859人浏览 · 2021-12-16 16:42:54

csdnvsaqin · 2021-12-16 16:42:54 发布

在页面最外层元素绑定事件

@touchstart="touchStart" @touchend="touchEnd"

/**
			 * 触摸开始  
			**/  
			touchStart(e) {  
				this.touchStartX = e.touches[0].clientX;  
				this.touchStartY = e.touches[0].clientY;  
			},  
			
			/**  
			* 触摸结束  
			**/  
			touchEnd(e) {  
				let deltaX = e.changedTouches[0].clientX - this.touchStartX;  
				let deltaY = e.changedTouches[0].clientY - this.touchStartY;  
				if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {  
					let index = null;
					if (deltaX >= 0) {  
						index = this.activeNav > 0 ? --this.activeNav : null
					} else {  
						index = this.activeNav < 5 ? ++this.activeNav : null
					}  
					if(index != null){
						this.navClick(this.activeNav,this.navList[this.activeNav])
					}
				} 
			},