插件地址:https://github.com/surmon-china/vue-awesome-swiper
問題總結
vue-awesome-swiper動態數據渲染,loop無效,輪循無效
可以在swiper容器上加一個v-if判斷一下,是否有數據加載
<template>
<swiper :options="swiperOption" v-if="showSwiper">
<!-- slides -->
<swiper-slide v-for="item in swiperList" :key="item.id">
<img class="swiperImg" :src="item.imageURL">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
props: {
swiperList: Array
},
data () {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination'
},
autoplay: true,
loop: true
}
}
},
computed: {
showSwiper () {
return this.swiperList.length
}
}
}
</script>
圖片加載頁面抖動的問題
height 0
overflow hidden
//圖片的高寬百分比
padding-bottom 25.6%