一、在app.js利用官方方法获取设备信息，将获取到的screenHeight、windowHeight度量单位统一由rpx换算为px
注：官方文档给出 【rpx换算px (屏幕宽度/750) 】【 px换算rpx (750/屏幕宽度)】
App({
onLaunch: function() {
wx.getSystemInfo({
success: res => {
this.globalData.systemInfo = res
this.globalData.windowHeight = res.windowHeight /(res.windowWidth /750)
this.globalData.screenHeight = res.screenHeight /(res.screenWidth /750)
}
})
},
globalData: {
systemInfo: null,
windowHeight: null, // rpx换算px后的窗口高度
screenHeight: null, // rpx换算px后的屏幕高度
}
})
二、在要使用的页面的js文件里引用
const app = getApp()
Page({
data: {
windowHeight: 0,
screenHeight: 0
},
onLoad: function() {
this.setData({
windowHeight: app.globalData.windowHeight,
screenHeight: app.globalData.screenHeight
})
}
}) 三、在要使用的页面的wxml里使用，若有底部导航栏tabBar则使用windowHeight，若没有则使用screenHeight <view class='contentListBox' style='height:{{windowHeight}}rpx'>
<view wx:key='index' wx:for='{{contentList}}' wx:for-index="index" wx:for-item="item">
{{item}}
</view>
</view> 此时class为contentListBox的view的高度为可用窗口高度。