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
相关推荐
excel5 小时前
在 Node.js 中用 C++ 插件模拟 JavaScript 原始值包装对象机制
前端
excel8 小时前
应用程序协议注册的原理与示例
前端·后端
我是天龙_绍10 小时前
浏览器指纹,一个挺实用的知识点
前端
theshy10 小时前
前端自制接口抓取工具:一键收集并导出接口列表
前端
wayne21410 小时前
跨平台开发框架全景分析:Flutter、RN、KMM 与腾讯 Kuikly 谁更值得选择?
前端
LuckySusu10 小时前
【js篇】JavaScript 对象创建的 6 种方式:从基础到高级
前端·javascript
LuckySusu10 小时前
【js篇】async/await 的五大核心优势:让异步代码像同步一样清晰
前端·javascript
艾雅法拉拉10 小时前
JS知识点回顾(1)
前端·javascript·面试
LuckySusu10 小时前
【js篇】Promise 解决了什么问题?—— 彻底告别“回调地狱”
前端·javascript
程序员海军10 小时前
如何让AI真正理解你的需求
前端·后端·aigc