微信小程序中使用swiper禁止用户上下滑动且不影响外部界面的滑

2020-04-22  本文已影响0人  拥抱新的每一天_

在经过百度一番后,发现了两种解决方案,其中,只有一种方案可以在禁止用户上下滑动的同时不影响外部界面的滑动

方案一

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

.swiper-disabled {
    position: relative;
}

.swiper-disabled::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 330rpx;
}
方案二

在swiper-items中添加catchtouchmove方法,但是在这个方案中,(注意::::)在手指触摸swiper这一块时,外部界面时无法进行滚动的!

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

猜你喜欢

热点阅读