微信小程序动态获取和设置元素宽高

需求

由于设计界面时常常会用到vh和rpx来设置元素的宽高，但是由于每个手机屏幕的高都不确定，而有时候在设计界面时想把内容刚好适应屏幕大小。

解决方法

设置要动态修改宽高的元素。

<view class="top">……
</view>
<view :style="{ height: viewHeight + 'px' }">……
</view>export default {data() {return {……viewHeight: '',};}

先动态获取屏幕的宽高和元素的宽高。

onLoad() {_self = this;uni.getSystemInfo({success: function(res) {console.log(res);let info = uni.createSelectorQuery().select('.top');(单引号里的是元素的类名，即class)info.boundingClientRect(function(data) {//res - 屏幕的所以参数//data - 该类名所对应的元素的各种参数//可以在这里进行加减乘除计算，并将值进行绑定_self.viewHeight = (res.windowHeight - data.height) / 3;}).exec();}});},

最后，如本文有错误的地方，欢迎指正！！

微信小程序动态获取和设置元素宽高相关推荐

学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...
微信小程序-动态获取appid
微信小程序动态获取appid 使用wx.getAccountInfoSync();方法. 具体实现方法如下: var accountInfo = wx.getAccountInfoSync(); va ...
微信小程序动态获取时间
在微信小程序中如何实现动态的获取时间呢?在这里我将直接提供代码,直接复制进去后就可以直击使用了. JS部分 var util = require('../../../utils/utils.js'); ...
微信小程序radio单选框如何修改宽高及选中样式
之前写过关于多选框设置样式的办法,其实与单选框设置的方法一样,唯一不同的是,在css样式里,/* 选中后的背景样式 (红色背景无边框可根据UI需求自己修改) */的下面定义的css需要加上!im ...
微信小程序 --- 动态获取input的value
这里对 input 使用的是 bindinput 方法: <input type="text" bindinput="input"> <but ...
jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...
微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容例如普通用户这里不显示赛事t ...
微信小程序--动态设置导航栏颜色
微信小程序--动态设置导航栏颜色既然要动态设置导航栏颜色,估计自定义导航栏也跑不了关于动态设置导航栏颜色,微信小程序官方文档给出了一个API: wx.setNavigationBarColor ...

微信小程序动态获取和设置元素宽高

需求

解决方法

微信小程序动态获取和设置元素宽高相关推荐

最新文章

热门文章