微信小程序中swiper组件禁止用户上下滑动这个实现起来比较的简单，我们通过手册会发现，该组件的swiper-item里面上下滑动会执行函数catchtouchmove,所以我们可以通过控制这个函数来实现

< swiper-item catchtouchmove=“stopTouchMove” >< swiper-item >
stopTouchMove: function() {
    return false;
}

这种方法可以阻止手动滑动，但是带来的影响是：页面不能滑动了。这是由于在你上下滑动的时候，仍然会执行滑动的这个动作，但是触发的函数没有进行任何的操作，如果我们想让页面也滑动，我们采用下面的方法。

给这个区域一个模板压在上面，但是该组件本身就应用了定位，那么我们可以采用，前置方法：

<swiper class="swiper-disabled">
    ......               
</swiper>
.swiper-disabled {
    position: relative;
}

.swiper-disabled::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
}

这样我们就解决了这个问题了。

最后修改：2020-04-22
© 允許規範轉載
如果覺得我的文章對你有用，請隨意讚賞