A simple method to deal with the tabBar at the bottom of WeChat applet blocking content

After configuring the tabBar in the WeChat applet, important content will be blocked, and different models such as iPhoneX may have a blank space below as shown below. The tricky thing is that the blank space at the bottom of the page will also display the page, so it is necessary to obtain the height of the blocked area.

It can be seen that there will be an extra blank space under the iPhoneX, which will also increase the occlusion of the tabBar. Various information about the model can be obtained through wx.getSystemInfoSync().

Among them, screenHeight is the screen height, and the bottom property of safeArea will automatically calculate the safe area, which is the vertical coordinate of the useful area after removing the blank area under the tabBar.

This way you can easily calculate the height of the tabBar:

const res = wx.getSystemInfoSync()
const { screenHeight, safeArea: { bottom } } = res
console.log('resHeight',res);
if (screenHeight && bottom){
  let safeBottom = screenHeight - bottom
  this.setData({
    height: 48 + safeBottom
  })
}

Among them, 48 is the height of our custom tab bar, so that we can customize a component to set the height to support the bottom, and then introduce the tabBar at the end of the page. However, when using webview, the webview will fill the entire page, resulting in failure to fill the blank below. At this time, the height of the obstruction can be passed to the webview page through the URL query and then set padding-bottom for the page.

Appendix: Main properties of tabBar:

The properties of each item in tabBar are as follows:

Summarize

This is the end of this article about how to deal with the content obstruction of the tabBar at the bottom of the WeChat mini-program. For more information about the content obstruction of the tabBar at the bottom of the mini-program, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!