javascript - swiper.js根據swiper-slide的內容高度動態設定swiper-wrapper的高度怎麼實現

Question

#

onSlideChangeEnd: function(swiper){
            var activeHight=$(".swiper-slide").eq(swiper.activeIndex).height()
            console.log(activeHight)
            // $(".swiper-wrapper").height(activeHight)
            // console.log($(".swiper-wrapper").height())
        }

現在是這麼寫的但是只有在第一次切換管用後面設定wrapper 的高度就不管用了
但是不寫後面那兩句輸出activeHeight也是有問題的前幾次滑動只有往左滑動過才能顯示出數值不然就是0

##但是只要寫後面的 activeHeight輸出也不變了
請問怎麼實作 是由於載入順序還是什麼呢
求大神指教

#現在不動態改的話 swiper-wrapper的高度總是不配的 滑動經常出現下面空白很大的情況

#

 var mySwiper = new Swiper('.swiper-container', {
        autoHeight: true,
        onSlideChangeStart: function(swiper){
            var activeHight=$(".swiper-slide").eq(mySwiper.activeIndex).height();
            console.log(activeHight)
            $(".swiper-container").height(activeHight)
        },
        onTransitionEnd: function (swiper) {
            $('#nav li').eq(mySwiper.activeIndex).addClass('active').siblings().removeClass('active');

            var tabIndex = $('#nav li').eq(mySwiper.activeIndex).data("id");
            pageTab = tabIndex;
            $("#pOrder" + tabIndex).show().siblings().hide();
            myScroll.scrollTo(0, 0);
            GetOrderList(tabIndex);
        }

    });
    mySwiper.disableMousewheelControl();
    $('#nav li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');

        mySwiper.slideTo($(this).index(), 500);

        var tabIndex = $(this).data("id");
        pageTab = tabIndex;
        $("#pOrder" + tabIndex).show().siblings().hide();
        myScroll.scrollTo(0, 0);
        GetOrderList(tabIndex);
    });

我知道了滑動沒有資料出現是資料是異步過來的沒資料的時候就把height取了所以是0 等資料載入出來也顯示不出來了因為外層容器高度是0
在瀏覽器加斷點順序執行就能出來資料應該也是印證了這點
但是現在還是不知道怎麼解決><

Answer 1

要用$(".swiper-container").height(activeHight)

非同步取得資料後再改變swiper-container的高度啊

var swiper = new Swiper('.swiper-container', {
    onSlideChangeStart: function(swiper) {
        var activeIndex = swiper.activeIndex;
        GetOrderList(activeIndex);
    }
});

function GetOrderList(index) {
    setTimeout(function() {
        //异步获取数据后再改变swiper-container的高度,我这里用了setTimeout代替...
        var activeHight = $(".swiper-slide").eq(index).height()
        $(".swiper-container").height(activeHight)
    }, 1000);
}