需求
由于设计界面时常常会用到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();}});},
最后,如本文有错误的地方,欢迎指正!!