uniapp实现左右滑动切换

在页面中

<view @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
//这里放需要滑动的区域
</view>

在script中

data() {
	return {
		startX: 0, //滑动开始x轴位置
		startY: 0, //滑动开始y轴位置
		moveX: 0, //滑动的x轴距离
		moveY: 0, //滑动的y轴距离
		like_state: 0, //-1：左滑，0：没滑动，1：右滑
	}
},
methods: {
	touchStart(event) {
		this.startX = event.touches[0].pageX;
		this.startY = event.touches[0].pageY;
		console.log('开始触摸：', this.startX, this.startY);
	},
	touchMove(event) {
		var currentX = event.touches[0].pageX;
		var currentY = event.touches[0].pageY;
		var moveX = currentX - this.startX;
		var moveY = currentY - this.startY;
		var text = '';
		var state = 0; //-1：左滑，0：没滑动，1：右滑
		// //左右方向滑动
		if (Math.abs(moveX) > Math.abs(moveY)) {
			if (moveX < -10) {
				text = '左滑';
				state = 1;
			} else if (moveX > 10) {
				text = '右滑';
				state = -1;
			}
		} else { //上下方向滑动
			if (moveY < 0) {
				text = '上滑';
			} else if (moveY > 0) text = '下滑';
		}
		this.like_state = state;
		this.moveX = moveX;
		this.moveY = moveY;
		console.log('开始滑动：', this.moveX, this.moveY, this.like_state);
	},
	touchEnd(event) {
		console.log(`移动距离:${Math.abs(this.moveX)}`)
		if (Math.abs(this.moveX) > 60 && this.like_state != -100) {
			var state = this.like_state
			this.like_state = -100//设置这个数是为了避免滑动之后点击不走touchMove而产生的不正常滑动
			//这里放需要进行的业务逻辑
		}
	},
}

文章参考自https://blog.youkuaiyun.com/weixin_38233549/article/details/103854143