admin管理员组

文章数量:1570425

一 概述

本文介绍两种将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
    })
  }

四 效果图

本文标签： 视图全屏程序开发微信小

版权声明：本文标题：微信小程序开发之——视图全屏显示 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1727669764a1125042.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。