解決swiper動態改變數據后分頁混亂問題

swiper動態改變數據后分頁器的頁數就變混亂了，導致內容展示不全。

本文的解決方法不能算是真正意義上的解決了問題。只是在展示上符合了要求。

效果圖：

 

解決方法：

每次動態改變數據時都把原來的swiper刪除，重新添加並初始化一個swiper，只是改變了swiper-wrapper里的數據。具體代碼實現如下：

html：

<!--html-->
<div id="swiperBox">
    <div class="swiper-container" id="img_detail">
        <div class="swiper-wrapper" id="swiperImgs">
        </div>
        <!-- 分頁器 -->
        <div class="swiper-pagination"></div>
    </div>
</div>

html部分就和官方文檔里給出的例子一樣的。我只是在swiper-container外邊又套了一個<div>用於在動態改變數據的時候動態刪除和添加swiper。

 

js

// js

var num = 7;//滑動窗口中圖片的數量
var color = "red";//當前選中的包的顏色

window.onload = function () {
    this.init();
}

// 初始化滑動窗
function init() {
    for (var i = 1; i <= this.num; ++i) {
        $("#swiperImgs").append('<div class="swiper-slide"><img src="image/' + color + '/d' + i + '.JPG" style="width:100%;"></div>')
    }
    var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
        }
    })
}

// 改變顏色
function changeColor(c, n,obj) {
    color = c;
    num = n;
    var parent=obj.parentNode;
    $(parent.childNodes).removeClass("selected");
    $(obj).addClass("selected");
    $("#swiperBox").empty(); //將原來的swiper刪除掉
    $("#swiperBox").append('<div class="swiper-container" id="img_detail"><div class="swiper-wrapper" id="swiperImgs"></div><div class="swiper-pagination"></div></div>');//添加了一個新的swiper
    init();//對swiper添加內容並完成初始化
}

 

網上比較多的方法是給對swiper設置屬性observe:true，或者改變數據后調用mySwiper.update()函數進行更新，我都試過了，但多少還是會出現一些問題，要不就是分頁器的標簽數不對，要不就是分頁器標簽不跟隨移動等等。無奈之下用了這種方法，踏實了。

 

以下是我改變顏色的按鈕的html：

<!-- 顏色選擇器 -->
<div class="colorBox">
    <button onclick="changeColor('red',7,this)" class="selected"><img src="image/colorBut/red.png"/></button>
    <button onclick="changeColor('green',3,this)"><img src="image/colorBut/green.jpg"/></button>
</div>