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

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

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

时间: 2025-01-08 03:00:05

微信小程序将view动态填满全屏的相关文章

微信小程序之一:动态添加view(view包含picker,input)

<view wx:for="{{array}}" wx:key="this" class="borderContainer"> <view class="borderContainer1"> <view class="firstBorder"> <view class="firstBorderInput"> <input maxlen

微信小程序的view标签中text如何居中?

display:flex; align-items:center; justify-content:center; 原文地址:https://www.cnblogs.com/lsyy2017/p/11128497.html

微信小程序 解决 view 文字 过多 溢出的问题,超过行数后隐藏显示省略号

多行文本 .note_item text { display: -webkit-box; font-size: 28rpx; color: #000000; line-height: 40rpx; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } 单行文本 .note2_item text { displa

如何入门微信小程序开发

最近微信开发小程序挺火的,自己选择了腾讯云官方推出的相册. 先下载: 破解版IDE下载地址,以及使用说明: http://download.csdn.net/detail/richard_jason/9660819 http://download.csdn.net/detail/richard_jason/9660821 这里由于csdn有上传大小限制,所以只能做两次上传了.要放在一起看哦. 安装步骤 一个步骤都不能错哦 1.安装0.7 - 扫码登陆 - 关闭0.7 2.安装0.9 --不要启动

微信小程序内测申请

想申请微信小程序的内测?别做梦了! 小程序内测是邀请制的,目前就发放了200个内测邀请.正因为稀缺,江湖传言内测资格已经炒到300万(一套房)一个了 但是!!!!你可以先熟悉一下相关资料和文档,下载一个开发工具在自己电脑上玩一下,虽然部分功能受到了限制,但是还是挺有意思的! 小程序开发过程中遇到的各种坑 摘要: 本文收集微信小程序.应用号开发过程中的各种坑,以及疑难问题.不定期整理解决方案. 如果你在开发过程中遇到了问题,请将你的问题在评论中回复,我会不定期整理. 本文收集微信小程序.应用号开发

一个小时快速搭建微信小程序

「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字--爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json

1万字!彻底看懂微信小程序

Q:为什么说小程序如炮友? A:小程序刚发布不久就流行一个段子:APP如原配,一年不用几次:服务号如情人,一个月固定几次:订阅号如酒店小卡片,天天可以卖广告:小程序像炮友,用完就走. 资本如嫖客,各个平台和垂直类掠夺者已经瓜分掉了线上流量,那么未来争夺的流量战场必然在实体场景,很多巨头其实已经证明了线下流量庞大的潜力.在快递包裹上印上自己的二维码关注公众号形成二次寄出快递的粘性,PokemonGo让用户在实体地图上捕获小精灵. 未来的入口不限于二维码,而是一切的富媒体.二维码之于2D识别,复杂图

微信小程序如何像vue一样在动态绑定类名

微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44 这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别,需要的朋友可以参考下 小程序 开发中遇到这样一个问题... 排行榜开发的时候,前三名的样式不同,其余的样式一样.但是都是通过同一元素来遍历的,当时卡了一下.后来发现有module模块化这一概念,于是查了下api,一下子就做出来了. 就是不同名次上边的样式根据实际情况展示效果. 模块化 我们可以将一些公共

微信小程序(一),授权页面搭建

wxml代码如下: <!--pages/index2/index2.wxml--> <view class="index2Container"> <image class="avatar" src="/static/images/y.jpg"></image> <text class="username">hello 微信小程序</text> <vi