码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2018-07-30 20:20:11      阅读:1327      评论:0      收藏:0      [点我收藏+]

标签:全屏   ice   使用   信息   sys   pre   微信小程序   style   fun   

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

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

标签:全屏   ice   使用   信息   sys   pre   微信小程序   style   fun   

原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/9392340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!