技術標籤：vue_swipervuevue.js

在Vue2.x中使用舊版本swiper問題記錄

首先在main.js中設定全域性引入

import 'swiper/swiper-bundle.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

<template>
    <div class="banner swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in banners" :key="index">
                <img :src="item.picUrl" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
    import Swiper from 'swiper'

    export default {
        name: 'Banner',
        data() {
            return {
                banners: null,
            }
        },
        methods: {
            bannerLoop() {
                new Swiper('.banner', {
                    direction: 'horizontal',
                    loop: true, // 迴圈模式選項
                    autoplay: {
                        delay: 2000, //3秒切換一次
                        disableOnInteraction: false
                    },
                    observer: true,//修改swiper自己或子元素時，自動初始化swiper
                    observeParents: true,//修改swiper的父元素時，自動初始化swiper
                    continuous: true,
                    spaceBetween: 20,
                    pagination: true,
                });
            }
        },
        created() {
            this.axios.get("/api/recommend/banner").then(data => {
                this.banners = data.data;
                this.$nextTick(() => {
                    this.bannerLoop()
                });
            }).catch(error => {
                console.log(error);
            })
        }
    }
</script>
 

問題：在使用舊版本swiper過程中出現了 loop（迴圈輪播） 失效的問題
解決方法：先將swiper的相關相關設定封裝成方法，然後在create中請求成功後在 this.$nextTick 中呼叫封裝方法

this.$nextTick(() => {
                    this.bannerLoop()
                });

this.$nextTick(操作DOM的時候會用到)

• Vue在觀察資料變化時並不是直接更新DOM，而是開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料改變

• 在緩衝時會去除重複資料，從而避免不必要的計算和DOM操作

• 然後，在下一個事件迴圈tick中，Vue重新整理佇列並執行實際（已去重的）工作。所以，如果你用一個for迴圈來動態改變資料100次，其實它只會應用最後一次改變，如果沒有這種機制，DOM就要重繪100次，這固然是個很大的開銷。

  this.$nextTick的摘要地址