微信小程序将view动态填满全屏

Posted 2020-12-26 东风杨柳岸，岁月如烟

一、在app.js利用官方方法获取设备信息

App({
    onLaunch: function() {
        wx.getSystemInfo({
            success: res => {
                this.globalData.systemInfo = res
            }
        })
    },
    globalData: {
        systemInfo: null
    }
})

 

获取到的windowWidth、windowHeight等度量单位为 px

二、在要使用的页面的js文件里将单位统一为rpx

const app = getApp()
Page({
    data: {
        deviceHeight: 0,
        deviceWidth: 0
    },
    onLoad: function() {
        this.setData({
            deviceHeight: app.globalData.systemInfo.windowHeight / (app.globalData.systemInfo.windowWidth / 750),
            deviceWidth: app.globalData.systemInfo.windowWidth / (app.globalData.systemInfo.windowWidth / 750)
        })
    }
})

三、在要使用的页面的wxml里使用

<view class=‘contentListBox‘ style=‘height:{{deviceHeight}}rpx‘>
    <view wx:key=‘index‘ wx:for=‘{{contentList}}‘ wx:for-index="index" wx:for-item="item">
        {{item}}
    </view>
</view>

此时class为contentListBox的view的高度即为可用窗口高度。