微信小プログラムSwiper自動調整高さバグ記録

今日、WeChat の小プログラムを作成中に、開発環境では正常に表示されているが、実機では 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 を同時に指定しないでください。これにより高さが上書きされる可能性があります。

end

微信小プログラムSwiper自動調整高さ バグ記録