uniapp中 swiper-item禁止右滑
可以通过以下方式实现禁止右滑:
- 在swiper-item上添加一个touchmove事件,阻止右滑操作:
<swiper-item @touchmove.stop.prevent></swiper-item>
- 使用uni-swiper组件的touchmove事件,在事件触发时判断当前的swiper-item是否是第一个item,如果是则阻止右滑操作:
<template>
<view>
<uni-swiper @touchmove="swiperTouchMove">
<uni-swiper-item>1</uni-swiper-item>
<uni-swiper-item>2</uni-swiper-item>
<uni-swiper-item>3</uni-swiper-item>
</uni-swiper>
</view>
</template>
<script>
export default {
methods: {
swiperTouchMove(e) {
const { current, source } = e.detail
if (source === 'touch' && current === 0 && e.touches[0].clientX - this.startX > 0) {
e.stopPropagation()
}
},
swiperTouchStart(e) {
this.startX = e.touches[0].clientX
}
}
}
</script>
其中,current表示当前swiper-item的下标,source表示事件来源,如果是通过touch操作触发的事件,则进行阻止操作。
原文地址: https://www.cveoy.top/t/topic/bAsH 著作权归作者所有。请勿转载和采集!