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
相关推荐
道友可好1 分钟前
AI 写代码太快了,快到你对齐不了它
前端·人工智能
无风听海12 分钟前
Bearer Token 权威指南:从原理到生产级安全实践
前端·javascript·安全
jerrywus19 分钟前
别只换模型!Claude Opus 4.8 努力控制 + Fast模式,真实能省钱3倍
前端·agent·claude
riuphan22 分钟前
JavaScript 类型判断完全指南
前端·javascript
Hilaku29 分钟前
前端工程师最终会变成 AI工程师?
前端·javascript·程序员
yeflx32 分钟前
Ubuntu22.04重装显卡驱动
前端·chrome
flyinmind39 分钟前
Java环境与Android环境中使用QuickJS
java·开发语言·javascript·quickjs
小二·40 分钟前
Prompt Engineering 高级技巧:CoT/ToT/ReAct 等进阶方法论实战
前端·react.js·prompt
chancygcx_41 分钟前
前端框架React day1--React入门
前端·react.js·前端框架
如烟花的信页1 小时前
数美滑块逆向分析
javascript·爬虫·python·js逆向