微信小程序开发之——视图全屏显示

一 概述

本文介绍两种将view全屏显示的方式：

• 布局文件设置宽度和高度
• 代码中获取到屏幕的宽度和高度，设置到view上

二 布局设置宽高全屏

2.1 布局文件(index.wxml)

<view style="background-color: coral;">
</view>

2.2 样式文件(index.wxss)

view{
  width: 100vh;
  height: 100vh;
}

三 代码获取到屏幕的宽度和高度设置全屏

3.1 布局文件(index.wxml)

<view style="background-color: coral; width: {{swidth}}px; height: {{sheight}}px;">
</view>

3.2 逻辑文件(index.js)

 onLoad: function (options) {
    this.setData({
      swidth:wx.getSystemInfoSync().windowWidth,
      sheight:wx.getSystemInfoSync().windowHeight
    })
  }

四 效果图