开发驴友网首页轮播页——解决页面抖动问题

本章节详见课程7-3
1.本章节在前面git项目的分支上进行开发
这里其实可以用view安装

抖动现象

在本案例中，如果我们选择3G，也就是模拟了一个比较慢的网络环境，这时候，如果图片没有完全加载出来的话，test会出现在页面上方，图片出来以后，会突然跳下来，这是因为，图片没有加载出来之前，图片的高度是0。

如何解决

把走马灯也就是swiper用一个div包裹起来，然后给这个div设置如下的css属性

    overflow hidden
    width 100%
    height 0
    padding-bottom 32.25% //相对于父元素的宽度。

还有一种解决办法，但是这种办法可能在浏览器兼容上会有差异

在这里插入代码片

width 100%
height 32.25vw

为了让用户体验效果更好，我们可以给wrper加一个背景颜色