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

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

 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>

 

转载于:https://www.cnblogs.com/LChenglong/p/9373557.html