{"success":true,"code":0,"msg":"","data":{"themeEx":{"tid":639,"replies":0,"views":8884,"searchs":0,"topGmtUpdate":null,"top":false},"theme":{"id":639,"title":"小程序禁止swiper手动滑动","content":"
审批页面的内容应该是不可编辑的,swiper应该固定在一张图片上,不能滑动。
在swiper-item节点上增加一个事件
<swiper-item item-id="{{item.id}}" catchtouchmove="stopTouchMove">\n ...\n</swiper-item>
然后在写上对应的方法,阻止滑动
stopTouchMove: function() {\n return false;\n}
-----------------------------------------------2019-01-10补充---------------------------------------------------
原先的方案会导致触碰到swiper组件滑动时,页面不能上下滚动。为了解决这个问题,采用了另外一套CSS方案
大致思路是,创建一个遮罩层,挡在swiper组件前面,使得swiper组件不能滑动,但不影响整体页面的滚动。
.swiper-disabled{\nposition: relative;\n}\n.swiper-disabled::after{\ncontent: '';\nposition: absolute;\ntop:0;\nleft:0;\n/*长宽根据需要调整*/\nwidth:330px;\nheight:260px;\n}
<swiper class="swiper-disabled">\n...\n</swiper>