uni-app小程序滑动事件


<view class="relative" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend">
</view>
data() {
		return {
			flag: 0,
			text: '',
			lastX: 0,
			lastY: 0
}
}
methods: {
		handletouchmove: function(event) {
			// console.log(event)
			if (this.flag !== 0) {
				return;
			}
			let currentX = event.touches[0].pageX;
			let currentY = event.touches[0].pageY;
			let tx = currentX - this.lastX;
			let ty = currentY - this.lastY;
			let text = '';
			this.mindex = -1;
			//左右方向滑动
			if (Math.abs(tx) > Math.abs(ty)) {
				if (tx < 0) {
					text = '向左滑动';
					this.flag = 1;
				//	this.getList();  //调用列表的方法
				} else if (tx > 0) {
					text = '向右滑动';
					this.flag = 2;
				}
			}
			//上下方向滑动
			else {
				if (ty < 0) {
					text = '向上滑动';
					this.flag = 3;
				//	this.getList();  //调用列表的方法
				} else if (ty > 0) {
					text = '向下滑动';
					this.flag = 4;
				}
			}

			//将当前坐标进行保存以进行下一次计算
			this.lastX = currentX;
			this.lastY = currentY;
			this.text = text;
		},
		handletouchstart: function(event) {
			// console.log(event)
			this.lastX = event.touches[0].pageX;
			this.lastY = event.touches[0].pageY;
		},
		handletouchend: function(event) {
			this.flag = 0;
			this.text = '没有滑动';
		},
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM