vue使用swiper動態加載 且 使用懶加載，輪播顯示白屏問題

 

Vue使用swiper動態加載數據，動態輪播數據顯示白屏問題處

公司臨時需要配合安卓ios提供一個頁面 其中用到輪播 懶加載等

為了省點事 我引了vue.js寫的 沒想到有一堆的bug 只好來查解決方案了

1.引進swiper.js  swiper.css

(我用的是3.4.2版本的（建議），經自己測試 4.0版本或者2.0版本的swiper寫到頁面中 不輪播 或者加載不到相應的js,css  具體為什么不能用 我也沒找到根本原因 可能是我比較菜的緣故哈哈)

如果是vue-cil整個項目 使用vue-awesome-swiper會比較多

npm i swiper@3.4.2 -S
//
npm install vue-awesome-swiper --save

2.HTML

 <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分頁器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要導航按鈕 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 如果需要滾動條 -->
        <div class="swiper-scrollbar"></div>
 </div>

3.

初始化Swiper

因為dom渲染完成才能初始化Swiper，所以將初始化放入vue的生命周期鈎子函數mounted中：

 　　　　mounted () {
　　　　　　this.swiperInit()

 　　　　}

 1　　　　swiperInit() {
                        this.$nextTick(function() {
                            var mySwiper = new Swiper('.swiper-container', {
                                observer: true, //修改swiper自己或子元素時，自動初始化swiper
                                observeParents: true, //修改swiper的父元素時，自動初始化swiper
                                loop: true,
                                initialSlide: 0,
                                autoplay: {
                                    disableOnInteraction: false,
                                    delay: 10000
                                },
                                speed: 300,
                                direction: 'horizontal',
                                // 如果需要分頁器
                                pagination: {
                                    el: '.swiper-pagination',
                                },
                                onSlideChangeEnd: function(swiper){ 
                                    swiper.update() 
                                },
                            })
                        })
                },

 3.如果輪播是動態獲取的 則在獲取到輪播數據時再重新初始化下swiper

4.如果同時用了懶加載VueLazyload  輪播一圈之后第一張顯示空白

既想用圖片懶加載又想用無限輪播：思路，首尾兩張圖片不用懶加載，中間的所有圖片都使用懶加載，代碼：

<img :src="item" v-if="index==0||index==(item.length-1)">
<img v-lazy="item" alt="" :key="item.src">

參考鏈接：

https://blog.csdn.net/yuzhibo22/article/details/80684298

https://segmentfault.com/q/1010000011959209/a-1020000012521042