小程序禁止swiper手动滑动 幻幻Fate 2018年11月22日 0 6,833次浏览 小程序,swiper

零、应用场景

审批页面的内容应该是不可编辑的，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>