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
相关推荐
杨荧3 小时前
基于大数据的美食视频播放数据可视化系统 Python+Django+Vue.js
大数据·前端·javascript·vue.js·spring boot·后端·python
cmdyu_3 小时前
如何解决用阿里云效流水线持续集成部署Nuxt静态应用时流程卡住,进行不下去的问题
前端·经验分享·ci/cd
WordPress学习笔记3 小时前
根据浏览器语言判断wordpress访问不同语言的站点
前端·javascript·html
yuanmenglxb20043 小时前
解锁webpack核心技能(二):配置文件和devtool配置指南
前端·webpack·前端工程化
鲸落落丶3 小时前
JavaScript构建工具
javascript
JefferyXZF4 小时前
Next.js 路由导航:四种方式构建流畅的页面跳转(三)
前端·全栈·next.js
神仙别闹4 小时前
基于Python+Vue+Mysql实现(物联网)智能大棚
vue.js·物联网·mysql
啃火龙果的兔子4 小时前
React 多语言(i18n)方案全面指南
前端·react.js·前端框架
阿奇__4 小时前
深度修改elementUI样式思路
前端·vue.js·elementui
小白白一枚1115 小时前
css的选择器
前端·css