javascript - swiper.js How to dynamically set the height of swiper-wrapper according to the content height of swiper-slide

Question

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

It is written like this now, but it only works after the first switch and then setting the height of the wrapper does not work.
But there is also a problem in outputting activeHeight without writing the next two sentences. The first few slides can only slide to the left. Only then can the value be displayed, otherwise it will be 0

But as long as I write the following activeHeight, the output will not change.
How to achieve it? Is it because of the loading order or what?
Please give me some advice

If you don’t change it dynamically now, the height of swiper-wrapper will always be inappropriate. When sliding, there will often be a large blank space below.

 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);
    });

I know that no data appears when sliding. The data comes asynchronously. When there is no data, the height is taken out, so it is 0. When the data is loaded, it cannot be displayed because the height of the outer container is 0.
In the browser The data can be obtained by adding breakpoints and executing sequentially, which should also confirm this
But now I still don’t know how to solve it><

Answer 1

Use $(".swiper-container").height(activeHight)

Get the data asynchronously and then change the height of the 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);
}