今天在做官网的时候需要用到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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/158665.html
