WeChat Mini Program Swiper Adaptive Height Pitfall Record

May 23, 2023#微信小程序 #前端 #踩坑 #Swiper187

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

When developing a WeChat mini program, there was an issue where the Swiper content was not displaying on a real device despite appearing normal in the developer environment. The problem was solved by manually calculating the height of the Swiper element and avoiding using both flex and height properties simultaneously.

Today, when writing a WeChat mini program, I encountered an issue where the content inside the Swiper was not displaying on the actual device, although it appeared normal in the developer environment.

The specific code is:

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

In this situation, using flex works fine in the developer tool, but in actual device debugging, preview, and experience version, the Swiper height successfully fills the screen, but the Swiper-item height is 0, resulting in no content being displayed.

The solution here is quite straightforward:

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

Manually calculate the height, and it is recommended to fix the height of other additional Views. Avoid using flex1 at the same time as it will override the height.

end