微信小程序Swiper自适应高度踩坑记录

AI 生成的摘要

在开发微信小程序时，遇到了一个问题：在开发者环境正常，但真机不显示Swiper内的内容。解决方案是手动计算高度，建议不要同时写上flex1，以避免覆盖height。

今天在写微信小程序的时候，遇到了一个问题在开发者环境正常但是真机不显示 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自适应高度 踩坑记录