padding-bottom百分比能解决 vue轮播抖动问题的理解

图片是vue 轮播图插件写的,即vue-awesome-swiper ，中间图片是在组件 HomeSwiper中的，HomeSwiper外有个div 元素内容显示word, HomeSwiper和div word都包含在home组件中

组件1  HomeSwiper
<template>
    <div class="slide-box">
      <swiper :options="swiperOption">
              <swiper-slide v-for="item of swiperList" :key="item.id" class="img-parent">
                <img class="swiper-img" :src="item.imgUrl" alt="">
    <!--以下看需要添加-->
    
            <!-- <div class="swiper-pagination"></div>    -->
            </swiper-slide>
    </swiper>

    </div>
</template>


组件2home.vue
<script>
import HomeBanner from './components/Banner.vue'

export default{
    name:'Home',
    components:{
        HomeBanner
    },
}
</script>

切换成3g网速，页面加载时，轮播图加载过慢，会导致的抖动，这是轮播的一个缺陷，该如何解决呢？
明确抖动的原因： 抖动的原因，盒子高度是被内容撑开的，当img没加载出来，img在容器中占位高度0，则底下的元素会自动跑到上面
所以一开始要给图片占位
给图片设置百分比高度不行，%是基于包含它的块级对象的百分比高度，设置高度的化，切换不同的屏幕就不适应了，如果包含它的会计对象的高度没有设置，那它就无法达到想要的效果。
图片父元素设置
{
transform: translateZ(0);
overflow: hidden;
padding-bottom:30.5%; (图片高/图片宽） /* padding-bottom基于父元素宽度的百分比 /
width:100%;
height:0;
/ 设置高度0,padding-bottom 30.5%，就像提前撑大了一个图片高度的空间 */
}
我看网上有人是这么设置的：

.swiper-img{
  width:100%; 
  display: block;
}

.slide-box{ 
  transform: translateZ(0);
 overflow: hidden;
 padding-bottom:30.5%; 
 /* 真实值接近图片高度 */
 /*  padding-bottom基于父元素宽度的百分比 */
 width:100%;
 height:0;
 /* 设置高度0,padding-bottom 30.5%，就像提前撑大了一个图片高度的空间 */
}

为什么设置 padding-bottom：图片高/图片宽 height:0;呢，以上面轮播图例子来说明
因为 padding-bottom百分比是相对父元素的，这里图片的宽也是100%，几乎和父元素宽一样。
所以计算以下 padding-bottom实际值=图片高/图片宽%(父元素宽)=(图片高/图片宽)*图片宽=图片高。
而一开始设置父元素height=0,则padding-bottom设置后相当于 给轮播图父元素填充了一个图片的高度，test也就不会向上跑了，就一直呆在图片下面

学习不在于内容繁多，而在于精细，接下来让我们每天vue一下吧~