解決vue中使用swiper的loop循環失效和路由跳轉回來後自動輪播失效需要手動滑動才能重新開始輪播

一、loop循環失效：

vue中使用v-for循環加載swiper的元件時

<div class='swiper__content'>
       <swiper :options="swiperOption" ref="mySwiper" class="swiper__content-item">
           <swiper-slide class="swiper-list" v-for="(item, index) in headerNotice" :key='index'>
               <div class="item-wrapper">
                   {{ item.content }}
               </div>
           </swiper-slide>
       </swiper>
   </div>
           

data資料為：

data() {
        return {
            swiperOption: {
                direction: 'vertical',
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false
                },
                loop: true
            },
            headerNotice: [
                {
                    content: 1,
                },{
                    content: 2,
                },{
                    content: 3,
                }
            ]
        };
    },
           

即使是設定了loop：true 還是不能無縫輪播

原因： loop設定為true 則開啟loop模式。loop模式：會在原本slide前後複制若幹個slide(預設一個)并在合适的時候切換，讓Swiper看起來是循環的， 可是在vue的v-for中時，異步加載的資料都還沒有傳回時，就先加載了Swiper元件并複制了sliper

解決辦法： 利用v-if的屬性，v-if=showProduct.length，確定異步加載的資料已經傳回後，再加載swiper元件

<div class='swiper__content' v-if='headerNotice && headerNotice.length > 0'>
            <swiper :options="swiperOption" ref="mySwiper" class="swiper__content-item">
                <swiper-slide class="swiper-list" v-for="(item, index) in headerNotice" :key='index'>
                    <div class="item-wrapper">
                        {{ item.content }}
                    </div>
                </swiper-slide>
            </swiper>
        </div>
           

還有一種辦法就是直接設定定時器然後調用切換到下一個

var mySwiper = new Swiper('.swiper-container');
setInterval(function() {
	mySwiper.slideNext();
}, 1000)
           

二、當路由跳轉回來後輪播失效，需要手動滑動一下才自動輪播的問題解決：

如果vue使用了緩存，當路由跳轉回來時候swiper的自動輪播會失效，可以嘗試重新渲染頁面，使用v-if來實作.

template中：

<div v-if='reRender'>
<div class='swiper__content' v-if='headerNotice && headerNotice.length > 0'>
     <swiper :options="swiperOption" ref="mySwiper" class="swiper__content-item">
           <swiper-slide class="swiper-list" v-for="(item, index) in headerNotice" :key='index'>
               <div class="item-wrapper">
                   {{ item.content }}
               </div>
           </swiper-slide>
       </swiper>
   </div>
</div>
           

script中的activated中：

data() {
        return {
            swiperOption: {
                direction: 'vertical',
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false
                },
                loop: true
            },
            headerNotice: [
                {
                    content: 1,
                },{
                    content: 2,
                },{
                    content: 3,
                }
            ],
            reRender: false
        };
    },
activated() {
        this.reRender = false;
        setTimeout(() => {
            this.reRender = true;
        }, 100);
    }