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
相关推荐
2501_915373883 小时前
Vue 3零基础入门:从环境搭建到第一个组件
前端·javascript·vue.js
沙振宇6 小时前
【Web】使用Vue3开发鸿蒙的HelloWorld!
前端·华为·harmonyos
运维@小兵6 小时前
vue开发用户注册功能
前端·javascript·vue.js
蓝婷儿7 小时前
前端面试每日三题 - Day 30
前端·面试·职场和发展
oMMh7 小时前
使用C# ASP.NET创建一个可以由服务端推送信息至客户端的WEB应用(2)
前端·c#·asp.net
一口一个橘子7 小时前
[ctfshow web入门] web69
前端·web安全·网络安全
读心悦8 小时前
CSS:盒子阴影与渐变完全解析:从基础语法到创意应用
前端·css
m0_616188498 小时前
使用vue3-seamless-scroll实现列表自动滚动播放
开发语言·javascript·ecmascript
香蕉可乐荷包蛋9 小时前
vue数据可视化开发echarts等组件、插件的使用及建议-浅看一下就行
vue.js·信息可视化·echarts
老马啸西风9 小时前
sensitive-word-admin v2.0.0 全新 ui 版本发布!vue+前后端分离
vue.js·ui·ai·nlp·github·word