问题：在页面中存在抖动问题，如下图所示，当网速较慢的时候，图片加载的比较慢，当图片没有加载完前，test是在图片的左上角位置此时不显示图片，当图片加载完，test在图片的左下角，这时候的变化就是页面抖动。
发生抖动的原因：当图片没有加载完成前，img的高度为0，没有将其撑开，等到图片加载完之后，img被撑开
解决方法：通过给swiper的父级元素设置一个固定的高度来解决的，width:100%,height:0,padding-bottom:31.25%
在<swiper-slide>上面加一层<div>
<div class='wrapper'>
<swiper-slide>
<img class="swiper-img" src=""/>
</swiper-slide>
<swiper-slide>
<img class="swiper-img" src=""/>
</swiper-slide>
</div>
添加样式
.wrapper
width:100%
height:0
padding-bottom:31.25%
overflow:hidden
.swiper-img
width:100%
可以通过下面的形式来设置宽高比，但有浏览器兼容问题
.wrapper
width:100%
height:31.25vw
.swiper-img
width:100%