初始化组件 mySwiper = new Swiper('.swiper-container', { autoplay: false,//可选选项,自动滑动 on:{ slideChange: function(){ //当swiper切换时,下面是项目里需要用到的js nowTabIndex = this.activeIndex; $(".swiper-header").animate({scrollLeft:nowTabIndex*100},300); //分类tab 切换效果 $('#cate'+nowTabIndex).siblings().removeClass('active'); $('#cate'+nowTabIndex).addClass('active'); nowTabID = $('#cate'+nowTabIndex).data('category'); nowPage = 1; noNext = false; $('#slide'+nowTabID).html(''); //清空缓存 list(); }, }, observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true,//修改swiper的父元素时,自动初始化swiper });
关于滑动过程中,可能一些tab页面会有下拉刷新,导致切换到第二个swiper内容页时,高度还是上一个swiper内容里的高度,会造成留白等问题,只需要加css即可。
.swiper-slide{height:10px} .swiper-slide-active { height:auto}
给swiper-sllide加高度,每次切换就可以重置height.