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
相关推荐
超人不会飛6 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦9 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想12 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
The_cute_cat13 分钟前
JavaScript的初步学习
开发语言·javascript·学习
海天胜景16 分钟前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
今晚打老虎z20 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982425 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴31 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干34 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗36 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端