Get the screen height in the applet

Screen height problem.
Sometimes it is necessary to obtain the screen height in small programs. Simply use wx.getSystemInfo to obtain the system information of the mobile phone.

There are 3 heights in wx.getSystemInfo, which are:

screenHeight: screen height

windowHeight: window height

statusBarHeight: status bar height

For small programs, the height of the screen = status bar height + navigation bar height + window height + tab bar height, as shown in the following figure:

Obtaining screen height and iPhoneX adaptation issues in mini program

So when we want to get the usable height of the window, we can directly get the windowHeight through wx.getSystemInfo in the page containing the tabbar label bar. How to use it:

app.js

App({
    
    
  onLaunch: function() {
    
     
  var that=this;
    // 获取屏幕高度
    wx.getSystemInfo({
    
    
      success: function(res) {
    
    
        that.globalData.windowHeight = res.windowHeight
      }
    })
},
globalData: {
    
    
    windowHeight: null,
  }
})

index.js

var app = getApp()
 Page({
    
    
     data: {
    
    
        windowHeight: app.globalData.windowHeight,
     },
 })

index.wxml

<scroll-view scroll-y style='height:{ 
        { 
        windowHeight}}px;'></scroll-view>

There are two ways to obtain the usable height of the screen in a page that does not contain a tabbar.

1. windowHeight window height + tabbar tab bar height

2. screenHeight screen height - statusBarHeight status bar height - navigation bar height