vue轮播,vue-awesome-swiper动态数据渲染,loop无效,轮循无效

时间:2021-10-27 04:01:14

解决办法:在渲染数组数据前。判断是否为空

 v-if="slideList.length>1"
<template>
<div class="banner_swiper" >
<swiper v-if="slideList.length>1" :options="swiperOption" ref="mySwiper" style="height:100%;" >
<!-- slides -->
<swiper-slide v-for="(item,index) in slideList" :key="index"><img :src="item.filePath"></swiper-slide>
<!-- <swiper-slide><img src="../../assets/images/banner2.png"></swiper-slide>
<swiper-slide><img src="../../assets/images/banner3.png"></swiper-slide> -->
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</swiper>
</div>
</template>
<script>
// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import {getHomeInfo} from '../../assets/js/api.js';
export default {
props: ["slideList"],
data() {
return {
swiperOption: {
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
autoplay: {
delay: 4000,//1秒切换一次
},
initialSlide :0,
loop : true,
pagination: {
el: '.swiper-pagination',
},
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// }, }
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
components: {
swiper,
swiperSlide
},
mounted() {
// console.log(
// 'This is current swiper instance object', this.mySwiper,
// 'It will slideTo banners 3')
// this.mySwiper.slideTo(3, 1000, false)
},
methods: {
}
};
</script>
<style>
.banner_swiper{width:100%;height:auto;}
.swiper-pagination-bullet-active{background-color:#ff450e;}
</style>