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>