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

需求

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

解决方法

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

<view class="top">
	……
</view>
<view :style="{ height: viewHeight + 'px' }">
	……
</view>

export default {
	data() {
		return {
			……
			viewHeight: '',
		};
	}

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

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();
		}
	});
	},

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