swiper写的tab高度自动

Posted 2023-05-12

我用swiper写了一个高度自动的tab，然后在这个tab中又写了一个tab切换，两个都用了autoHeight: true,现在的问题就是，在内部的tab切换后，外部的tab的高度不能自动，需要脱了页面，外部的tab才能重置高度，求解决办法

参考技术A http://www.swiper.com.cn/api/basic/2015/1127/294.html

设置aotoHeight:true追问

没看清楚我的问题吗 ？我两个都用了autoHeight: true ；
现在问题我已经解决了 ，是要内部tab切换的时候要重新加载一次外部高度就可以了

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

解决方案：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加载不同的方法
}
});

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