vue中使用swiper坑记录

swiper中左右按钮切换和vue 的v-show v-if结合使用

现象:当vue中使用v-show或者v-if控制swiper的显示或者隐藏的时候,swiper只在第一次加载的时候能够正确切换,一旦隐藏或者显示之后就不起作用了。

原因:好像是因为display:block造成了swiper的bug.

解决方案:

1.添加如下属性:

javascript 复制代码
        observeParents: true,
        observer: true,

swiper 3.4.2版本测试有效

2.上面属性如果不起作用,可以考虑从display入手,可设置visible属性(未经测试)

坑2

左右切换按钮disable状态设置了css pointer-events:none 当点击切换按钮的时候,点击事件会透传到下一层,设置阻止冒泡也不起作用。

解决方案:

javascript 复制代码
pointer-events:auto
相关推荐
沙蒿同学2 小时前
不引 Ghostscript:我用纯 Go 给 PDF 做了一场「压缩手术」
前端·后端·github
Linux_cy2 小时前
服务器管理工具哪个好用?我用了七八个
运维·服务器·javascript·python·ssh·面板·gmssh
变与不变8063 小时前
jQuery细节以及使用应用场景
前端·javascript·jquery
SailingCoder4 小时前
【封闭结束1】端到端交付:Agent 一次请求如何走完全链路
前端·安全·ai·面试·agent·harness
风骏时光牛马7 小时前
AI多模块协同自动化工作流
前端
zhangminghuan7 小时前
前端面试应对技巧
前端·面试·职场和发展
计算机魔术师7 小时前
潜伏14年的PHP致命洞,AI跑两天就交卷了
前端
IT_陈寒7 小时前
Vue的这个响应式陷阱我居然现在才发现
前端·人工智能·后端
Python自动化直播8 小时前
智能脚本批量管理拆开看:导入、导出、重写、试听
前端·python·ai·秒播