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

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

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

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

.wxml

<view class="swiper-tab">毕碧

<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">红手毕举色</view>

<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">绿色</view>

<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">黄数槐色</view>

swiper可以嵌套

nested 用于嵌套相同方向的swiper时,当切换到子swiper时停止郑咐父swiper的切换。

请将子swiper的nested设置为true。

由于需要培丛搭在slideChangeEnd时判断作用块,因此快速滑动时这个选项无效。

<script>

var mySwiper = new Swiper('#swiper-container1')//父swiper

var mySwiper2 = new Swiper('#swiper-container2',{//子配拿swiper

nested:true,

})

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12335434.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存