微信小程式Swiper自適應高度踩坑記錄

AI 翻譯

這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文

AI 生成的摘要

在开发微信小程序时，遇到了一个问题，开发者环境正常但真机不显示Swiper内的内容。解决方案是手动计算高度，建议其他View固定高度，不要同时使用flex1。

今天在寫微信小程序的時候，遇到了一個問題在開發者環境正常但是真機不顯示 Swiper 內的內容
具體代碼為

<Page>
<View></View> // height:120rpx
  <Swiper> // flex:1
    <Swiper-item>
    </Swiper-item>
    <Swiper-item></Swiper-item>
  </Swiper>
</Page>

在這種情況下，利用 flex 在開發者工具是正常的，但是在真機調試預覽和體驗版中

Swiper 高度成功鋪滿但是 Swiper-item 高度為 0 導致不展示任何內容

此處的解決方案也非常簡單粗暴

.className-swiper{
  height:calc(100vh - calc(120rpx - env(safe-area-inset-bottom)));
}

直接手動計算出高度，這裡建議其他額外 View 固定高度
不要同時寫上 flex1 這樣也會覆蓋 height

end

微信小程式Swiper自適應高度 踩坑記錄