swiper中左右按钮切换和vue 的v-show v-if结合使用
现象:当vue中使用v-show或者v-if控制swiper的显示或者隐藏的时候,swiper只在第一次加载的时候能够正确切换,一旦隐藏或者显示之后就不起作用了。
原因:好像是因为display:block造成了swiper的bug.
解决方案:
1.添加如下属性:
observeParents: true,observer: true,
swiper 3.4.2版本测试有效
2.上面属性如果不起作用,可以考虑从display入手,可设置visible属性(未经测试)
坑2
左右切换按钮disable状态设置了css pointer-events:none 当点击切换按钮的时候,点击事件会透传到下一层,设置阻止冒泡也不起作用。
解决方案:
pointer-events:auto