vue實戰(zhàn)(3)——vue中swiper-slide中異步加載數(shù)據(jù)swiper無法自適應(yīng)高度的問題

一、場景描述

vue中使用swiper做多個tab切換時,一般會加上autoHeight為true來自適應(yīng)不同swiper-slide的高度,這種情況在每個swiper-slide內(nèi)數(shù)據(jù)都是本地數(shù)據(jù)的時候,autoHeight都能正常計算swiper-container的高度,但當(dāng)swiper-slide中數(shù)據(jù)是接口獲取的數(shù)據(jù)時,由于異步加載數(shù)據(jù)的原因會導(dǎo)致swiper-container就算高度出現(xiàn)問題,導(dǎo)致頁面不能往下滑動的問題

banner中img是多張圖的組合,slide的高度會很大
swiper配置


接口獲取數(shù)據(jù)時,不能正常計算swiper-container的高度

二、粗魯?shù)慕鉀Q辦法


延時1000ms先設(shè)置swiper-container的高度,再設(shè)置成高度自適應(yīng)


延時后swiper-container高度渲染正常?

注:此方法過于粗魯,希望看到這篇文章的各路大神有什么好的方法趕緊拍磚,不勝感激![抱拳][抱拳][抱拳]

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容