vue使用swiper遇到的一些坑分享

牧云@^-^@ 提交于 2019-11-27 10:35:33

swiper这是一个很强大的轮播展示工具,但往往也会有一些未知BUG,尤其是在手机端,由于性能局限,会导致效果和PC测试的时候有完全不一样的效果,今天就帮踩一下。

犹豫项目需要做一个引导页的类似卡牌翻牌的走马灯效果

这里写图片描述
这里写图片描述
这里写图片描述

这个页面分两个部分
1.后面背景部分
2.swiper容器部分

导入swiper成功后遇到的坑===>
1.在电脑端展示完全没有问题,但在手机上展示,刚进这个页面加载的时候就卡屏,第一张牌出不来,而且背景色为白色,动一下就好了,背景色就能出来,当你滑动卡牌的时候,写好的背景被白色遮盖住像闪电一样

解决方案=>({
在寻找这个闪屏的颜色后发现,如果是swiper这个容器的父层只要有背景色,在移动的时候就会出现闪屏效果,经验证更改他们的颜色,闪屏颜色随之更改。
然后就决定把背景图这一块用fixed 并撑满全屏去处理和swiper父容器同级。利用fixed层级关系把父层带有颜色的部分完全遮盖住,这辈子甭想出来露脸了哈哈~
})
2.解决了一个问题会随之出现其他捆绑问题。现在是不闪屏了,但是swiper这个容器莫名其妙的会被横向拖拽走,查看了相关元素,width都是100%并且都没有overflow-auto给他可滑动的空间。—–>比较怪异
解决方案 =>({
因为没有找到原因就用暴力些的方案处理
也像背景一样直接fixed 层级高了一些定死在屏幕中间。
})

点击swiper-item 在配置项中有一个属性见图
这里写图片描述

注意vue中用箭头函数可以获取this—>指向vue

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!