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