VUE swiper只有一张图片的时候不滑动，多张滑动

原文：https://blog.csdn.net/cc_want/article/details/83751445

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc_want/article/details/83751445
<template>
<div class="banner">
<swiper :options="swiperOption" v-if="showSwiper">
<!-- slides -->
<swiper-slide v-for="item of list" :key="item.id">
<img class="banner-img" :src="item.imgUrl">
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: "Banner",
props: {
list: Array
},
data() {
return {
swiperOption1: {
pagination: {
el: '.swiper-pagination'
},
observer: true,
autoplay: true,
loop: true
},
swiperOption2: {
pagination: {
el: '.swiper-pagination'
},
observer: true,
autoplay: true,
loop: false
}
}
},
computed: {
swiperOption(){
var len = this.list.length
console.log('swiperOption list size:',len)
if(len == 1){
return this.swiperOption2
}else{
return this.swiperOption1
}
},
showSwiper() {
var len = this.list.length
console.log('list size:',len)
return len
}
}
}
</script>
处理过程是这样的，添加一个计算属性，在data中定义两种配置，一种是多张图片的swiper配置，一张是单张图片的swiper配置
————————————————
版权声明：本文为CSDN博主「cc_want」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/cc_want/article/details/83751445