首页 > 代码库 > swiper里面的,tab切换,不同的slide高度不一样,外层高度何如随之改变,如果里面的每一屏的高度不一样,那么就会一直以高度最大的一个座位最外层的高度,总成了页面内容少的那一页有很大空白,改如何动态改变外层的高度呢
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加载不同的方法
}
});
先到这里,应该还有更好更简单的方法以后遇到了在分享吧。
swiper里面的,tab切换,不同的slide高度不一样,外层高度何如随之改变,如果里面的每一屏的高度不一样,那么就会一直以高度最大的一个座位最外层的高度,总成了页面内容少的那一页有很大空白,改如何动态改变外层的高度呢