屏幕高度问题
小程序中有时候需要获取屏幕高度使用,简单的通过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状态栏高度 - 导航栏高度