uni-app 禁止 swiper 手动滑动

我们在使用 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>

版权属于：瞭月

本文链接：https://www.lervor.com/archives/175/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。