项目场景：vue-cli里面引入swiper轮播组件，开启自动轮播轮播后，第一张图总是一闪而过

vue-cli里面引入swiper轮播组件，使用loop: true,属性

问题描述

vue-cli里面引入swiper轮播组件，开启自动轮播轮播后，第一张图总是一闪而过，切换回最后一张也会出现同一种效果 ，且图像无法正常显示，数据正常。

原因分析：

 new Swiper(".card_swiper", {
              effect: "cards",
              grabCursor: true,
              loop : true,
              observer: true, 
              observeParents: true,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
                },
              on: {
                slideChange: function(){
                  _t.acNum = this.activeIndex; //切换结束时，告诉我现在是第几个slide
                },
              },
            });

解决方案：

html

<div class="swiper-wrapper">
	<div class="swiper-slide" v-for="(item,index) in ComposeCommodity" :key="index">
		<img class="prrImg" :src="item.cover" alt="">
		<!-- <van-image fit="cover" :src="item.cover"></van-image> -->
		<div class="s_title text_over">{{ item.name }}</div>
		<div>{{item.commodityId}}</div>
		<div class="s_tag_out" v-for="(itm,idx) in item.tags.split(',')" :key="idx">
			<div class="d_i" v-if="item.tags">{{itm}}</div>
		</div>
	</div>
	</div>
	<div class="swiper-button-prev" /><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
	<div class="swiper-button-next" /><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
</div>

js

//加载数据
      queryComposeCommodity(){
        let _t = this;
        api.queryComposeCommodity().then(res => {
          _t.ComposeCommodity = res.data;
          _t.$nextTick(() => {
            this.sip();
          })
        })
      },
      //Swiper
      sip(){
        let _t = this;
           new Swiper(".card_swiper", {
              effect: "cards",
              grabCursor: true,
              loop : true,
              observer: true, 
              observeParents: true,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
                },
              on: {
                slideChange: function(){
                  _t.acNum = this.realIndex; //切换结束时，告诉我现在是第几个slide
                },
              },
            });