swiper里面的，tab切换，不同的slide高度不一样，外层高度何如随之改变，如果里面的每一屏的高度不一样，那么就会一直以高度最大的一个座位最外层的高度，总成了页面内容少的那一页有很大空白，改如何

Posted 2020-10-02

解决方案：1.autoHeight: true;缺点：有明显的跳动效果
2.先给容器设固定高度，每次滑动多少时，改变当前tab页的容器高度，我在实现是遇到一点小问题，代码忘记保存了。

3.滑动切换第二个页面的顶部，需要用scrollTop实现，

onSlideChangeStart: function(swiper){
//$( ‘.swiper-container‘ ).scrollTop(0);这样是直接到顶部，往往会出现闪屏，
$( ‘.swiper-container‘ ).animate({scrollTop: 0},10);//动画慢慢过渡到顶部
}

4.在每个tab页加上垂直方向的swiper，并设置freeMode: true，
美中不足的是： 必须给每个垂直方向的swiper-slide设置固定高度，否则一块会占整个屏幕页面
代码如下：
var mySwiperIndex = new Swiper(‘#swiper-container-index‘, {
slidesPerView: ‘auto‘,
direction: ‘vertical‘,
freeMode: true,
freeModeMomentum: false,
freeModeMomentumBounce: false,
onSlideNextStart: function(swiper) {//回调函数，滑块释放时如果触发slider向前(右、下)切换则执行。类似于onSlideChangeStart
var i = swiper.activeIndex;
//根据i来判断要加载该部分以的方法，预加载

}
});
mySwiperIndex.on("TouchEnd", function(swiper) {
//下拉加载
if (swiper.isEnd) {

LoadingMore();//加载更多

}

//上拉刷新
if (swiper.translate > 0) {
window.location.reload();//这里应该是根据不同的tab加载不同的方法
}
});

先到这里，应该还有更好更简单的方法以后遇到了在分享吧。