在vue项目中 使用swiper轮播图的关于 在ios中图片白边闪屏踩坑记录

场景描述：

近日，接到一个需求，改善APP首页的布局，需要在顶部添加一个可滚动的栏目导航，以切换栏目然后切换栏目内容类似于唯品会目前的切换效果。如下图

问题描述：

在切换顶部栏目的时候，下面内容页的banner图片会出现短暂的白边闪屏。在android中并没有什么问题，在ios中，在左右切换栏目页的时候，顶部的轮播图会有一瞬间的图片闪屏白边。

原因分析：

思考原因可能是因为我没有对整个页面进行一个懒加载。因为栏目页面的数据我都是一次性加载出来的。而且都在一个页面。因为种种原因，所以暂时不能实现切换栏目的时候进行一个页面懒加载。

所以推断问题出现可能是因为：1.swiper 插件的兼容性；2.图片加载问题；3.以及网络问题；4.还有就是图片元素的问题

解决方案：

起初以为是图片没加载完的原因，然后预加载、懒加载图片，还是不能解决。然后尝试着用本地静态图片，白边出现的概率少了一点，但是还是有这个问题，推断和网络还是有点关系。

之后试着就换了一种切换效果，之前slide的切换效果，默认为"slide"（位移切换），改变了切换效果之后就不会出现白边问题了。但是这样并不能解决问题。其他的动画都不适合栏目切换的效果