javascript - swiper.js Comment définir dynamiquement la hauteur du swiper-wrapper en fonction de la hauteur du contenu du 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())
        }

C'est ainsi que cela est écrit maintenant, mais cela ne fonctionne qu'après le premier commutateur, puis le réglage de la hauteur du wrapper ne fonctionne pas
Mais il y a aussi un problème lors de la sortie de activeHeight sans écrire les deux dernières phrases. ne peut afficher la valeur qu’en glissant vers la gauche. Sinon c’est 0

.

Mais tant que j'écris la sortie activeHeight suivante, cela ne changera pas
Comment y parvenir ? Est-ce à cause de l'ordre de chargement ou quoi ?
Veuillez me donner quelques conseils

.

Si vous ne le modifiez pas dynamiquement maintenant, la hauteur du swiper-wrapper sera toujours inappropriée lors du glissement, il y aura souvent un grand espace vide en bas

.

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

Je sais qu'aucune donnée n'apparaît lors du glissement. Les données arrivent de manière asynchrone. Lorsqu'il n'y a pas de données, la hauteur est supprimée, elle est donc 0. Lorsque les données sont chargées, elles ne peuvent pas être affichées car la hauteur du conteneur externe est. 0.
Ajoutez une séquence de points d'arrêt dans le navigateur. Les données qui sortent après l'exécution devraient également le confirmer
Mais maintenant, je ne sais toujours pas comment le résoudre><

Answer 1

Pour utiliser $(".swiper-container").height(activeHight)

Récupérez les données de manière asynchrone puis modifiez la hauteur du conteneur swiper

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