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

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

作者: 拥抱新的每一天_ | 来源:发表于2020-04-22 17:48 被阅读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;
    }
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/ovkwihtx.html