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

需求

由于设计界面时常常会用到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();}});},

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