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

it2022-05-05  144

本章节详见课程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加一个背景颜色


最新回复(0)