解决当图片在上文字在下刚进页面文字先刷出来,随后图片刷出来文字会抖动问题
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<swiper-slide v-for="swiperList of swiperLists" :key="swiperList.id">
<img class="swiper-img" :src='swiperList.imgUrl'>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default{
name: 'HomeSwiper',
data () {
return {
swiperOption: {
pagination: '.swiper-pagination',
loop: true
},
swiperLists: [{
id: '0001',
imgUrl: 'http://img1.qunarzz.com/piao/fusion/1809/90/2f9e4bd02ba83202.jpg_890x330_0aa870e7.jpg'
}, {
id: '0002',
imgUrl: 'http://img1.qunarzz.com/piao/fusion/1811/c2/cf99d28bb0ac8b02.jpg_890x330_81ad66fd.jpg'
}]
}
}
}
</script>
/**padding-bottom为图片高宽比自适应 */
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 37.08%
background: #eee
.swiper-img
width:100%
</style>
示例代码如上,主要为.wrapper下width heught 及 padding-bottom设置