uniapp开发微信小程序，swiper使用问题

---

问题描述

最近在开发中遇到一个需求，在一个页面中通过tabs来切换组件，希望有swiper左右切换的效果…

过程

拿到需求一分析，这还不简单吗？直接顶部一个tabs组件，下面跟着一个swiper组件不就好了。

<view class="type_box">
       <view class="type_item" :class="currentSwiper == item.value ? 'active_type' : ''" @click="changeType(item)" v-for="(item, index) in typeList" :key="index">
       {{ item.name }}
      </view>
</view>

<swiper class="swiper" :indicator-dots="false" :autoplay="false" :disable-touch="true" :current="currentSwiper">
       <swiper-item  v-for="i in 3">
            <view class="content">{{i}}</view>
       </swiper-item>
</swiper>

第一个踩坑点

要求只允许点击tabs左右切换组件，不希望用户是手动滑动切换，查看uniapp官方文档发现有一个属性可以实现

但是它不支持微信小程序。。。
既然不生效那就自己给swiper-item添加一个禁止触摸的事件@touchmove.stop。

<swiper-item  v-for="i in 3" @touchmove.stop>
     <view class="content">{{i}}</view>
</swiper-item>

第二个踩坑点

@touchmove.stop可以禁止用户触摸事件，但是页面上还需要上下滑动，下拉刷新等操作，页面大部分区域都是swiper，所以直接给swiper-item加@touchmove.stop就不太可行

想要在禁止用户上下滑动的同时不影响外部界面的滑动
可以想办法让swiper-item开启BFC，脱离文档流

给swiper设置class，并且给它相对定位，给class::after绝对定位，因为swiper-item自带绝对定位

.swiper {
    position: relative;
}

.swiper::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 500rpx;
}

---

至此问题解决!