我们在使用 uni-app 的滑块视图容器 swiper 时,有时候放入该容器的内容需要左右滑动(如使用 SwipeAction 滑动操作组件),这时就与 swiper 的滑动功能冲突了,此时我们可以通过在每个 swiper-item 中加上 @touchmove.stop="",禁用 swiper 的手动滑动切换功能。具体代码如下:

<template>
    <view class="my-page">
        <swiper class="swiper-box" :current="tabCurrentIndex" duration="300">
            <swiper-item @touchmove.stop="">
                <scroll-view class="swiper-box-scroll" scroll-y>
                    <!-- 主题内容放这里面 -->
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>

<style>
    page {
        height: 100%;
    }
</style>

<style lang="scss" scoped>
    .my-page {
        height: 100%;
        .swiper-box {
            overflow: hidden;
            height: 100%;
            &-scroll {
                height: 100%;
            }
        }
    }
</style>

通过 @touchmove.stop="" 禁用 swiper 的手动滑动切换功能,同时也会禁止其上下滑动,我们可以通过引入 scroll-view 组件解决。

如果觉得我的文章对你有用,请点个赞