微信小程序将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的高度为可用窗口高度。

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/9392340.html