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

场景描述：

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

问题描述：

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

原因分析：

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

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

解决方案：

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

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

最后在我几经周折中发现问题可能和图片的宽高有关。于是我就是着将原来的样式

img{
   display:inline-block;
   width: 100%;     // 高度自适应
}

调整为：

img{
    display:inline-block;
    width: 100%;     
    height：2.4rem;     // 或是设置 min-height 也可以解决问题
}

最后发现：原因推测可能是在ios中，对于图片加载的时候不能识别到图片的宽高，需要明确一个高度值，以备系统加载，因为我并没有给图片加上明确的高度。没有明确的高度，所以ios就需要自己去识别图片的高度。在它分析图片高度的同时加载图片，于此同时切换栏目的话，就会存在白边问题，因为图片识别并没有加载完成。

推测应该是在设置了高度之后，ios就会先把这个宽高的框加载出来，然后把图片加载出来，就不会有白边闪屏了。

 

swiper还有一个问题：

在 swiper 内部的 swiper-slide 中的布局中，与切换动画方向同方向的overflow: scroll; 无效。所以只能在swiper里面嵌套 swiper 。。。

以上是我在项目中遇到的 swiper 的问题。