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

今天在写微信小程序的时候，遇到了一个问题在开发者环境正常 但是真机不显示 Swiper 内的内容
具体代码为

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

在这种情况下，利用 flex 在开发者工具是正常的 ，但是在真机调试 预览 和体验版中

Swiper 高度成功铺满 但是 Swiper-item 高度为 0 导致不展示任何内容

此处的解决方案也非常简单粗暴

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

直接手动计算出高度，这里建议其他额外 View 固定高度
不要同时写上 flex1 这样也会覆盖 height

end