一、在app.js利用官方方法获取设备信息，将获取到的screenHeight、windowHeight度量单位统一由rpx换算为px
注：官方文档给出 【rpx换算px (屏幕宽度/750) 】【 px换算rpx (750/屏幕宽度)】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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, <span style="color: #008000;">// rpx换算px后的窗口高度</span> screenHeight: null, <span style="color: #008000;">// rpx换算px后的屏幕高度</span> } }) |
二、在要使用的页面的js文件里引用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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
|
1 2 3 4 5 6 7 |
<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的高度为可用窗口高度。 |
