uniapp 微信小程序实现监听屏幕左右滑动实现tab标签切换效果

news/2024/7/20 1:15:20 标签: uni-app, 微信小程序, 小程序

需求背景:

        实际的项目开发之中,有很多所谓的奇葩需求,当工程量相对较大的时候去更换组件会显得特别麻烦和费时。我这次的需求因为某些特殊原因,更换组件后也无法实现需要达到的效果,所以最后只能监听滑动事件,相信你看了我的代码也能轻松搞定!

         @touchstart="touchStart" @touchend="touchEnd" @touchcancel="touchCancel" 是主要的函数,写在你要监听的盒子上。

<view class="swiper-title" @touchstart="touchStart" @touchend="touchEnd" @touchcancel="touchCancel">{{item.name}}</view>
		data() {
			return {
				minOffset: 50, //最小偏移量,低于这个值不响应滑动处理
				minTime: 60, // 最小时间,单位:毫秒,低于这个值不响应滑动处理
				startX: 0, //开始时的X坐标
				startY: 0, //开始时的Y坐标
				startTime: 0, //开始时的毫秒数
				animationData: {},
			};
		},
touchStart(e) {
				// console.log('touchStart', e)
				this.startX = e.touches[0].pageX; // 获取触摸时的x坐标  
				this.startY = e.touches[0].pageY; // 获取触摸时的x坐标
				this.startTime = new Date().getTime(); //获取毫秒数
			},
			touchCancel: function(e) {
				this.startX = 0; //开始时的X坐标
				this.startY = 0; //开始时的Y坐标
				this.startTime = 0; //开始时的毫秒数
			},
			touchEnd: function(e) {
				// console.log('touchEnd', e)
				var endX = e.changedTouches[0].pageX;
				var endY = e.changedTouches[0].pageY;
				var touchTime = new Date().getTime() - this.startTime; //计算滑动时间
				//开始判断
				//1.判断时间是否符合
				if (touchTime >= this.minTime) {
					//2.判断偏移量:分X、Y
					var xOffset = endX - this.startX;
					var yOffset = endY - this.startY;
					// console.log('xOffset', xOffset)
					// console.log('yOffset', yOffset)
					//①条件1(偏移量x或者y要大于最小偏移量)
					//②条件2(可以判断出是左右滑动还是上下滑动)
					if (Math.abs(xOffset) >= Math.abs(yOffset) && Math.abs(xOffset) >= this.minOffset) {
						//左右滑动
						//③条件3(判断偏移量的正负)
						if (xOffset < 0) {
							// console.log('向左滑动 下一页')
							if(this.current + 1 < this.tabList.length) {
								this.current ++
								this.animation.translateX(-190).step()
							}else return
						} else {
							// console.log('向右滑动')
							if(this.current > 0) {
								this.current --
								if(this.current > 1) this.animation.translateX(190).step()
							}else return
						}
						this.change(this.current)
						this.animationData = this.animation.export()
					} else if (Math.abs(xOffset) < Math.abs(yOffset) && Math.abs(yOffset) >= this.minOffset) {
						//上下滑动
						//③条件3(判断偏移量的正负)
						if (yOffset < 0) {
							// console.log('向上滑动')
						} else {
							// console.log('向下滑动')
						}
					}
				} else {
					// console.log('滑动时间过短', touchTime)
				}
			},

        this.animation.translateX(190).step() 是动画效果和监听滑动无关,如果你想效果更好也可以像我一样在onLoad中使用uni.createAnimation()创建一个动画效果并使用它!


http://www.niftyadmin.cn/n/4926230.html

相关文章

electron项目开发环境搭建

由于最近需要做一款跨平台的桌面应用&#xff0c;所以选择使用electron来作为开发的框架&#xff0c;下面说一下如何搭建一个简单的electron项目: 一、准备工作 安装git&#xff1a;下载git | 官网 安装node&#xff1a;下载 | Node.js 中文网 安装npm/cnpm&#xff1a;npm …

ADB连接安卓手机提示unauthorized

近期使用airtest进行自动化测试时&#xff0c;因为需要连接手机和电脑端&#xff0c;所以在使用adb去连接本人的安卓手机vivo z5时&#xff0c;发现一直提示unauthorized。后来经过一系列方法尝试&#xff0c;最终得以解决。 问题描述&#xff1a; 用数据线将手机接入电脑端&…

力扣 474. 一和零

题目来源&#xff1a;https://leetcode.cn/problems/ones-and-zeroes/description/ C题解&#xff1a;本题其实是01背包问题&#xff01;只不过这个背包有两个维度&#xff0c;一个是m 一个是n&#xff0c;而不同长度的字符串就是不同大小的待装物品。动规五部曲&#xff1a; …

WebRTC | 信令服务器

目录 一、相关术语 1.NAT 2.STUN服务器 3. TURN服务器 4.打洞 二、WebRTC一对一架构 三、信令 1. 信令传输协议的选择 2. 信令服务器的实现方案 3. 信令服务器的业务逻辑 信令服务器的作用主要有两个&#xff1a;一是实现业务层的管理&#xff0c;如用户创建房间&…

研发工程师玩转Kubernetes——PVC使用storageClassName选择PV

除了《研发工程师玩转Kubernetes——PVC使用Label和storage选择PV》中介绍的使用Label做选择因子外&#xff0c;PVC还可以通过storageClassName选择符合条件的PV。 StorageClass的设计是用于描述如何动态创建PV。最开始时&#xff0c;管理员需要一次性申请好所有的PV&#xff0…

Go学习第八天

签名 func (a *Account) Sign(message []byte) ([]byte, error) {hash : crypto.Keccak256Hash(message)signature, err : crypto.Sign(hash.Bytes(), a.privateKeyECDSA)if err ! nil {log.Fatal(err)}signMsg : []byte(hexutil.Encode(signature))return signMsg, err }验签…

马来西亚的区块链和NFT市场调研

马来西亚的区块链和NFT市场调研 基本介绍 参考&#xff1a; https://zh.wikipedia.org/wiki/%E9%A9%AC%E6%9D%A5%E8%A5%BF%E4%BA%9A zz制度&#xff1a;联邦议会制 语言文字&#xff1a; 马来语 民族&#xff1a; 69.4%原住民&#xff08;土著&#xff09;&#xff0c;23.2%…

sqlite3多线程操作问题

在项目中使用sqlite3&#xff0c;有时会报database is locked 两种方式 1、多线程读&#xff0c;多线程写&#xff0c;只使用共同一个数据库连接&#xff0c;即使用同一个SQLiteHelper连接&#xff0c;调用sqlite3_busy_timeout 2、多线程读&#xff0c;单线程写&#xff0c;每…