1、在nvue里使用swiper，设置全屏大小并设置垂直滚动。
2、在swiper-item里设置一个充满父元素大小的元素，设置touchstart事件。
3、上下滑动切换swiper就会发现有时候滑不动。
1***@qq.com
- 发布：2025-05-12 18:03
- 更新：2025-05-12 20:26
- 阅读：90
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window11
HBuilderX类型： 正式
HBuilderX版本号： 4.64
手机系统： Android
手机系统版本号： Android 13
手机厂商： 小米
手机机型： 安卓手机所有类型
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
希望里面使用touchstart事件不要影响外层swiper滚动。
希望里面使用touchstart事件不要影响外层swiper滚动。
实际结果：
swiper里面使用touchstart事件会影响外层swiper滚动。
swiper里面使用touchstart事件会影响外层swiper滚动。
bug描述：
在nvue页面里使用swiper，swiper里使用touchstart等事件就会影响swiper的滑动切换，有时候会swiper滑动切换会失效，非常不灵敏。测试了几乎所有安卓机都受touch事件影响的。
1***@qq.com (作者)
就直接在nuve使用swiper全屏滚动就行了，里面的元素加上touch事件就会受影响，多滑动几次或反方向滑动就会出现卡顿。
2025-05-13 10:34
1***@qq.com (作者)
easing-function="easeInCubic"
>
<swiper-item class="swiper-item" v-for="(item, index) in 5" :key="index">
<text>{{ item }} ---- {{ index }}</text>
<button @click="toggleTouch(true)">打开touch事件</button>
<view class="swiper-item-wrap" v-if="showTouch" @touchstart="touchstart">
<button @click="toggleTouch(false)">关闭touch事件</button>
</view>
</swiper-item>
</swiper>
</view>
2025-05-13 10:36
DCloud_UNI_JBB
回复 1***@qq.com: 你要不发个完整的demo吧
2025-05-13 13:46
1***@qq.com (作者)
easing-function="easeInCubic"
>
<swiper-item class="swiper-item" v-for="(item, index) in 5" :key="index">
<text>{{ item }} ---- {{ index }}</text>
<button @click="toggleTouch(true)">打开touch事件</button>
<view class="swiper-item-wrap" v-if="showTouch" @touchstart="touchstart">
<button @click="toggleTouch(false)">关闭touch事件</button>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
name: 'LiveNativePlyer',
data() {
return {
swiperOptions: {
isAuto: false, // 是否主动切换下一个直播间
vertical: true, // 是否垂直滚动
circular: true, // 是否循环滚动
duration: 0, // 滚动时间
},
},
methods: {
toggleTouch(flag) {
this.showTouch = flag
},
}
}
</script>
<style lang="scss" scoped>
.pages-live-player-index {
position: relative;
flex: 1;
.swiper {
flex: 1;
.swiper-item {
position: relative;
flex: 1;
align-items: center;
justify-content: center;
.swiper-item-wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99;
align-items: center;
justify-content: center;
flex: 1;
padding-top: 200rpx;
}
}
}
}
</style>
2025-05-14 09:36