解决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>