微信小程序將view動態填滿全屏

一、在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的高度為可用窗口高度。