【vue2】swiper插件自动循环失效（loop失效）

可能是因为数据是动态渲染的，在请求到数据之前，就已经完成了swiper的初始化，因此解决方案有：

1.swiper组件添加v-if：（如以下代码中的v-if="banner.length"）

<!-- 轮播图 -->
      <div :class="$style.newsBanner">
        <div :class="$style.swiperBox">
          <swiper
            ref="newsSwiper"
            :options="swiperOptions"
            :class="$style.swiper"
            v-if="banner.length"
          >
            <swiper-slide v-for="(el, index) in banner" :key="index">
              <img :src="el.src" style="height: 100%; width: 100%" />
            </swiper-slide>
            <div
              class="swiper-pagination"
              :class="$style.swiperPaginationNews"
              slot="pagination"
            ></div>
          </swiper>
        </div>
      </div>

  data() {
    return {
      swiperOptions: {
        loop: true,
        speed: 500,
        autoplay: {
          delay: 4000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
          clickable: true,
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
      },
      banner: [],
      list: [],
      data: [],
      active: 0,
    };
  },

　　

2.参考以下博客，获取到数据时初始化：

https://www.nhooo.com/note/qagvr7.html