欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 金融 > vue中使用swiper坑记录

vue中使用swiper坑记录

2025/4/26 19:01:57 来源:https://blog.csdn.net/weixin_44523653/article/details/147251491  浏览:    关键词:vue中使用swiper坑记录

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词