博客

屏幕高度问题

小程序中有时候需要获取屏幕高度使用，简单的通过wx.getSystemInfo即可获取到手机的系统信息

wx.getSystemInfo中有3个高度，分别是：

screenHeight：屏幕高度

windowHeight：窗口高度

statusBarHeight：状态栏高度

对于小程序来说屏幕的高度 = 状态栏高度 + 导航栏高度 + 窗口高度 + 标签栏高度，如下图所示：

小程序中获取屏幕高度及iPhoneX适配问题

所以我们想要获取窗口可使用高度时，在含有tabbar标签栏的页面中可以直接通过wx.getSystemInfo获取windowHeight来使用，使用方法：

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>

在不含有tabbar标签栏的页面中屏幕可使用高度的获取有两种方式

1、windowHeight窗口高度 + tabbar标签栏高度

2、screenHeight屏幕高度 – statusBarHeight状态栏高度 – 导航栏高度