我们在使用 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
组件解决。
版权属于:瞭月
本文链接:https://www.lervor.com/archives/175/
版权声明:本文为瞭月原创文章,转载请附上原文出处链接和本声明。