swiper高度不一致的问题
用swiper插件时,遇到高度不同的内容选项,这时某页面是需要做分页的(即上拉加载更多等类似的分页),这时如果某一个内容选项的内容很多,切换到有做分页的页面,显示的是“上拉加载更多”,并需要上拉一下才能把内容加载出来,显然这是不合理的,应该是若有内容就显示内容,内容下面显示“没有更多”,若无内容就显示“没有更多”而不是“上拉加载更多”,如下图:
在网上找了很多资料,终于解决了,嚯哈哈哈\(^o^)/~
首先样式添加:.
.swiper-slide{
height:0px;
}
.swiper-slide-active{
height: auto !important;
min-height: 31rem;/*这个根据自身的情况,可加可不加*/
}
然后写js,此处参考https://blog.csdn.net/fanhu6816/article/details/53440236:
<script>
$(function(){
setTimeout(changeTab,100);
function changeTab(){
var mySwiper = new Swiper('.swiper-container',{
autoHeight:true,
onTransitionStart:function(swiper){
$(".tab-a li").eq(mySwiper.activeIndex).children('a').css("color","#0083DD").parent().siblings().children('a').css("color","#333");
}
});
$(".tab-a").on("click","li",function(){
var index = $(this).index();
$(this).children('a').css("color","#0083DD").parent().siblings().children('a').css("color","#333");
mySwiper.slideTo(index,500);
});
}
/*下面是做分页的*/
myDrop('.collegeLive-content','.collegeLive-content ul','/college-export-detail/{{Request::route("id")}}/live')
myDrop('.collegePublicCourse-content','.collegePublicCourse-content ul','/college-export-detail/{{Request::route("id")}}/publiccourse')
myDrop('.collegeCase-content','.collegeCase-content ul','/college-export-detail/{{Request::route("id")}}/case')
})
</script>