今天在做官网的时候需要用到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;
}