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

Z时代
2024-01-10
分类：综合

vue

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

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

这个页面分两个部分
1.后面背景部分
2.swiper容器部分
导入swiper成功后遇到的坑===>
1.在电脑端展示完全没有问题，但在手机上展示，刚进这个页面加载的时候就卡屏，第一张牌出不来，而且背景色为白色，动一下就好了，背景色就能出来，当你滑动卡牌的时候，写好的背景被白色遮盖住像闪电一样
解决方案=>（{
在寻找这个闪屏的颜色后发现，如果是swiper这个容器的父层只要有背景色，在移动的时候就会出现闪屏效果，经验证更改他们的颜色，闪屏颜色随之更改。
然后就决定把背景图这一块用fixed 并撑满全屏去处理和swiper父容器同级。利用fixed层级关系把父层带有颜色的部分完全遮盖住，这辈子甭想出来露脸了哈哈~
}）
2.解决了一个问题会随之出现其他捆绑问题。现在是不闪屏了，但是swiper这个容器莫名其妙的会被横向拖拽走，查看了相关元素，width都是100%并且都没有overflow-auto给他可滑动的空间。—–>比较怪异
解决方案 =>({
因为没有找到原因就用暴力些的方案处理
也像背景一样直接fixed 层级高了一些定死在屏幕中间。
})