小程序windowHeight在不同页面高度不一致问题及解决方案

小程序可以通过wx.getSystemInfo获取系统信息

 

 1. windowHeight 概念

可使用窗口高度，即：屏幕高度（screenHeight） - 导航（tabbar）高度 - 导航栏高度 - 状态栏高度。

在不含导航（tabbar）的页面，

windowHeight =屏幕高度（screenHeight） - 导航栏高度 - 状态栏高度

 

了解规则

iPhone X ： 导航栏高度 44 、 状态栏高度 44 、tabBar高度 83 
其他机型 ： 导航栏高度 44 、 状态栏高度 20 、 tabBar高度 49

 

 

2.使用windoeHeight

在页面中调用wx.getSystemInfo即可获取当前页面的屏幕高度，

wx.getSystemInfo({
      success: function (res) {
        console.log('--------------获取系统信息，获取屏幕高度---------------')
        console.log(res)
      },
      fail: function (res) { },
      complete: function (res) { },
    })

3.不同页面WINDOWHEIGHT不一致解决办法

但是不同页面获取的屏幕高度不同，为了方便使用，将WINDOWHEIGHT写入全局变量，在含有的TabBar页面正常调用，在不含的TabBar页面加上的TabBar的高度使用

app.js

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

含有的TabBar的页面

xxx.js

var app = getApp();

data:{
    windowHeight: app.globalData.windowHeight,
}

不含的TabBar的页面

xxx.js

var app = getApp();

data:{
    windowHeight: app.globalData.windowHeight + 48,
}

页面使用

xxx.wxml

<view style='height:{{windowHeight+"px"}}'>

 

 

在app.js中获取到的WINDOWHEIGHT包含的TabBar的高度

所以在不含的TabBar的页面比含的TabBar页面需要多加一个的TabBar的高度

 

 

 

以下为小程序官方文档wx.getSystemInfo的介绍

wx.getSystemInfo（Object object）

获取系统信息

参数

对象对象

属性	类型	默认值	是否必填	说明	支持版本
成功	功能		否	接口调用成功的回调函数
失败	功能		否	接口调用失败的回调函数
完成	功能		否	接口调用结束的回调函数（调用成功，失败都会执行）

object.success回调函数

参数

对象资源

属性	类型	说明	支持版本
牌	串	手机品牌	> = 1.5.0
模型	串	手机型号
pixelRatio	数	设备像素比
屏幕宽度	数	屏幕宽度	> = 1.1.0
screenHeight	数	屏幕高度	> = 1.1.0
WINDOWWIDTH	数	可使用窗口宽度
WINDOWHEIGHT	数	可使用窗口高度
statusBarHeight	数	状态栏的高度	> = 1.9.0
语言	串	微信设置的语言
版	串	微信版本号
系统	串	操作系统版本
平台	串	客户端平台
fontSizeSetting	数	用户字体大小设置。以“我 - 设置 - 通用 - 字体大小”中的设置为准，单位px。	> = 1.5.0
SDKVersion	串	客户端基础库版本	> = 1.1.0
benchmarkLevel	数	（仅Android）性能等级，-2或0：该设备无法运行小游戏，-1：性能未知，> = 1设备性能值，该值越高，设备性能越好（目前设备最高不到50）	> = 1.8.0