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

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

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

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

二 布局设置宽高全屏

2.1 布局文件(index.wxml)

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

2.2 样式文件(index.wxss)

1
2
3
4
view{
  width: 100vh;
  height: 100vh;
}

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

3.1 布局文件(index.wxml)

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

3.2 逻辑文件(index.js)

1
2
3
4
5
6
onLoad: function (options) {
   this.setData({
     swidth:wx.getSystemInfoSync().windowWidth,
     sheight:wx.getSystemInfoSync().windowHeight
   })
 }

四 效果图