js 移动端 tab切换栏下使用多个Swiper

最新推荐文章于 2023-02-23 17:37:09 发布

yjwu5353

最新推荐文章于 2023-02-23 17:37:09 发布

阅读量5.7k

点赞数 1

文章标签： javascript tab Swiper 移动端

本文链接：https://blog.csdn.net/yjwu5353/article/details/70161293

版权

做个心得小记录，引用了bootstrap的tab切换栏和Swiper相结合，需要再每个tab栏下使用一个swiper滚动，每个swiper都要经过初始化，问题就是永远只有第一个tab栏的swiper生效，第二，三个无效。解决方案如下，在初始化中添加两个属性，observer:true,observeParents:true。此处顺便提一下，Swiper的自带属性，如swiper-wrapper，swiper-slide等，并不能被随意更改，样式设置可以通过设置其他的类名，id名来更改，且swiper-wrapper下如果加了其他不带有swiper-slide属性的div（或其他元素），将会对页面滚动产生影响。

var swiper = new Swiper('#chart .swiper-container', {
    scrollbar: '#chart .swiper-scrollbar',
    scrollbarHide: true,
    slidesPerView: 'auto',
    grabCursor: true,
    direction : 'vertical',
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true//修改swiper的父元素时，自动初始化swiper
});
var swiper2 = new Swiper('#details .swiper-container', {
    scrollbar: '#details .swiper-scrollbar',
    scrollbarHide: true,
    slidesPerView: 'auto',
    grabCursor: true,
    direction : 'vertical',
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true//修改swiper的父元素时，自动初始化swiper
});