【uniapp中swiper禁止左右滑动、允许上下滑动】

问题描述

在某些极端的应用场景下，可能会碰到禁止swiper左右滑动，但是允许上下滑动。

---

解决方案：

思路：判断用户手势，将操作回溯。

<swiper :disable-touch="false" duration="100" class="swiper" :current="scroll" @change="swiperChange" :style="{ height: swiperHeight + 'px' }">
	<swiper-item :key="item" @touchstart="itemTouchStart" @touchend="itemTouchEnd" v-for="item in 6">
		{{item}}
	</swiper-item>
</swiper>

const scroll = ref(0)			//当前进度
const itemTouchStartX = ref()	//按下的位置
const postion = ref('')			//左滑还是右滑

/** 触摸屏幕  */
const itemTouchStart = (e : any) => {
	//记录起始位置
	itemTouchStartX.value = e.changedTouches[0].pageX
}

/** 触摸结束  */
const itemTouchEnd = (e : any) => {
	/** 左滑还是右滑  */
	if (itemTouchStartX.value - e.changedTouches[0].pageX > 30) postion.value = 'right'
	if (e.changedTouches[0].pageX - itemTouchStartX.value > 30) postion.value = 'left'
}

/** 滑动控制器 */
const swiperController = () => {
	if (postion.value) {
		/** 因为异步原因，必须包一个定时器加入宏任务*/
		setTimeout(() => {
			/** 用户向左滑动，进度会-1， 咱们把进度++，就又回到了当前的item。右边同理 */
			postion.value === 'left' ? scroll.value++ : scroll.value--
			/** 一定要清空 postion ， 不然死循环了*/
			postion.value = ''
		}, 50)
	}
}

/** 左右滑动成功的回调  */
const swiperChange = (e : any) => {
	swiperController()
}