微信小程序中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%;
}

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

Last modification:April 22nd, 2020 at 06:04 pm
If you think my article is useful to you, please feel free to appreciate