前段时间在做项目的时候用到了swiper来做Tab切换,但是却遇到了下面的问题:
swiper中加了autoheight后swiper-wrapper的高度显示不正确,
function changeQuestion(){//问答的滑动区域
var mySwiper = new Swiper ('.questions .swiper-container', {
autoHeight:true,
onSlideChangeStart: function(){
$(".questions-nav .active").removeClass('active');
$(".questions-nav li").eq(mySwiper.activeIndex).addClass('active');
}
})
$(".swiper-wrapper").css("height","100%");
}
我在后面加了一个$(".swiper-wrapper").css("height","100%");后显示正常了,但是页面垂直方向不能滑动了,左右滑动一下后就能恢复正常,所以这不是一个正确的方法,又继续探索。
之后我在提问的专题中提出了这个问题,但是过了一周也没人给出解决方案,眼瞅着项目接近尾声,所有功能都已完成,就剩这个老大难了,实在没办法我也是下了狠招,把代码开始一段一段的删,最后把问题锁定在了图片上,把列表中的图片删除掉就能恢复正常,否则就是我那个老天爷啊,通过各种试,把图片的固定尺寸给取消了也不行,把图片的单位从rem换到px再换到em,没TM一个有反应的。
这不。。。。拿出了我刚买的大梨啃了起来,啃着啃着脑子突然转圈了,我把代码发给朋友看一看显示效果,果然,两边都是显示不全,但是。。。。但是。。。我们两边显示的高度也是不一样的,问题的根源貌似露出来了,是网速不同加载出来的图片高度不一样多,靠~原来是图片加载的问题。
这样一来就好了,知道问题是在swiper初始化的时候图片没有加载完,这样给加个定时器就ok了:
setTimeout(changeTab,100);
functionchangeTab(){
var mySwiper = new Swiper ('.welfare-classify .swiper-container', {
autoHeight:true,
onSlideChangeStart:function(){
$(".classify-nav .active").removeClass('active');
$(".classify-nav li").eq(mySwiper.activeIndex).addClass('active');
}
});
$(".classify-nav li").on("touchstart",function(){
varf=$(".classify-nav span").index(this);
$(".classify-nav .active").removeClass("active");
$(this).addClass("active");
mySwiper.slideTo($(this).index());
})
}
所以啊,技术点没有什么难的地方,主要看你用不用心,细不细心了,困扰已久的问题终于得以解决,可以睡个好觉了。。。吼吼