tab切换中嵌套swiper轮播

今天在做官网的时候需要用到swiper多图轮播的功能,但是得嵌套在tab切换中,就在我把砖都搬完后,发现了个问题,就是我在进行tab切换后,发现原本设置的swiper的自动轮播竟然失效了,而且样式也是乱的,只有第一项是正常的,这时我就在网上进行地毯式的搜索,找了好半天也没找到解决的方案,于是自己就索性去研究了下,把我的解决方法展示在这里,仅供参考
1、针对tab切换样式直接乱掉的问题

// 在配置中添加这两个属性
启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
默认false
observer: true,
// 将observe应用于Swiper的祖先元素。当Swiper的祖先元素变化时,例如window.resize,Swiper更新。
observeParents: true,

2、切换后无法自动轮播

// 我们需要对tab中的每个swiper进行实例化,也就是说,你有几个swiper就要实例化几次swiper,比如下面这个代码
var swiper1 = new Swiper(‘.swiper-container1‘, {
    slidesPerView: 6,
    spaceBetween: 10,
    loop: true,
    autoplay: 3000
});
var swiper2 = new Swiper(‘.swiper-container2‘, {
    slidesPerView: 6,
    spaceBetween: 10,
    loop: true,
    autoplay: 3000
});
…………

/**
 * 当然,我们不能这么写,我们可以给这个实例化的swiper进行封装下,请看示例:
 @params index 点击tab切换对应的索引值,每次切换的时候调用下这个方法,然后传个当前的索引过来,需要注意 的是这个方法要先在onload中执行下,不然你刚进入页面就会有问题了,然后就是你的索引是从0开始的哦,然后就ok啦
 */
function createSwiper(index) {
    var swiper = new Swiper(‘.swiper‘ + index, {
        // 根据浏览器宽度决定一屏显示几个
        slidesPerView: mInnerWidth > 768 ? 6 : 3,
        spaceBetween: 10,
        loop: true,
        autoplay: 3000,
        // tab切换失效bug解决
        observer: true,
        observeParents: true,
        // 抓手图标
        grabCursor: true
    });
    return swiper;
}

tab切换中嵌套swiper轮播

上一篇:获取命令帮助


下一篇:require.context()实现前端工程自动化