swiper多层嵌套，页面加载有时banner没有高度

Question

最外层的pages是大的滑动切换，然后中间的scroll-container是长内容滚动，在第一个最内层的wrapper slide中还嵌套着一个轮播，var html = '';

    html += '<div class="swiper-container" id="swiper-banners" style="height:100%;>';
        html += '<div class="swiper-wrapper sw_banner" style="height:100%;>';  
            html += '<div class="swiper-slide sw_slide" style="height:100%;"><img src="images/1.jpg" alt=""></div>';
            html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/2.jpg" alt=""></div>';
            html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/3.jpg" alt=""></div>';
            html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/4.jpg" alt=""></div>';
            html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/5.jpg" alt=""></div>';
            html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/6.jpg" alt=""></div>';
        html += '</div>';
        
        html += '<div class="pagination"></div>';
    html += '</div>';
    
    然后页面加载的时候就会出现问题，有时候banner的盒子都会没有高度，图片获取到了但是高度没有，发现new swiper的一些问题，但是有时刷新一次，两次以后就会有了，求教这是什么问题。

//Init Navigation

var nav = $('.swiper-nav').swiper({
    slidesPerView: 4,
    freeMode:true,
    freeModeFluid:true,
    onSlideClick: function(nav){
        var index=nav.clickedSlideIndex;
        pages.swipeTo( nav.clickedSlideIndex);
        $('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index");
    }
})

//Function to Fix Pages Height
function fixPagesHeight() {
    $('.swiper-pages').css({
        height: $(window).height()-nav.height
    })
}
$(window).on('resize',function(){
    fixPagesHeight()
})
fixPagesHeight()

//Init Pages
var pages = $('.swiper-pages').swiper({
    onTouchEnd: function(pages){
        var index=pages.activeIndex;
        $('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index");
    },
    onSlideChangeEnd: function(pages){
        var index=pages.activeIndex;
        $('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index");
    },
    observer: true,
     observeParents: true
})



var as;
//Scroll Containers
$('.scroll-container').each(function(index){
    if(index==0){
        as=$(this).swiper({
            mode:'vertical',
            scrollContainer: true,
            mousewheelControl: true,
            scrollbar: {
                container:$(this).find('.swiper-scrollbar')[0]
            },
            slidesPerView:'auto',
            observer: true,
             observeParents: true,
        })
        
    }else{
        $(this).swiper({
            mode:'vertical',
            scrollContainer: true,
            mousewheelControl: true,
            scrollbar: {
                container:$(this).find('.swiper-scrollbar')[0]
            }
            
        })
    }
    
})


var html = '';
    html += '<div style="height:0.89rem;"></div>';
    
    html += '<div class="swiper-container" id="swiper-banners" style="height:100%;>';
        html += '<div class="swiper-wrapper sw_banner" style="height:100%;>';  
            html += '<div class="swiper-slide sw_slide" style="height:100%;"><img src="images/1.jpg" alt=""></div>';
            html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/2.jpg" alt=""></div>';
            html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/3.jpg" alt=""></div>';
            html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/4.jpg" alt=""></div>';
            html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/5.jpg" alt=""></div>';
            html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/6.jpg" alt=""></div>';
        html += '</div>';
        
        html += '<div class="pagination"></div>';
    html += '</div>';

var bannerSwiper = $('#swiper-banners').swiper({
    pagination : '.pagination',
    autoplay : 3000,
    loop : true,
    grabCursor : true,
    visibilityFullFit : true,
    paginationClickable : true,
    updateOnImagesReady : true,
    observer : true,
    observeParents : true
})
 
 as.prependSlide(html,'swiper-slide','div');
as.updateActiveSlide(0);
as.reInit();

Answer 1

唉 判断高度刷新。。想不出何解