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

最新推荐文章于 2024-04-13 16:14:03 发布

csdnvsaqin

最新推荐文章于 2024-04-13 16:14:03 发布

阅读量1.8k

点赞数

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

本文链接：https://blog.csdn.net/qq_37570945/article/details/121978291

版权

移动端开发事件处理触摸事件滑动切换导航栏

关键词由CSDN通过智能技术生成

uni-app 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

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

@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])
					}
				} 
			},