零、应用场景

审批页面的内容应该是不可编辑的,swiper应该固定在一张图片上,不能滑动。


一、方案

在swiper-item节点上增加一个事件

<swiper-item item-id="{{item.id}}" catchtouchmove="stopTouchMove">
    ...
</swiper-item>

然后在写上对应的方法,阻止滑动

stopTouchMove: function() {
  return false;
}


-----------------------------------------------2019-01-10补充---------------------------------------------------

原先的方案会导致触碰到swiper组件滑动时,页面不能上下滚动。为了解决这个问题,采用了另外一套CSS方案

大致思路是,创建一个遮罩层,挡在swiper组件前面,使得swiper组件不能滑动,但不影响整体页面的滚动。

.swiper-disabled{
position: relative;
}
.swiper-disabled::after{
content: '';
position: absolute;
top:0;
left:0;
/*长宽根据需要调整*/
width:330px;
height:260px;
}
<swiper class="swiper-disabled">
...
</swiper>


赞助本站,网站的持续发展离不开你们的支持!一分也是爱ヾ(◍°∇°◍)ノ゙
 本文链接: ,花了好多脑细胞写的,转载请注明链接喔~~
登陆
      正在加载评论