比如一些scroll-view、z-paing等支持垂直滚动的组件,一般都需要设置一个高度值,允许的值:
那么最终我们场景都不满足上面的两种条件,就是不能很容易得到想要的高度,那么怎么办呢?
其实大家很容易想到动态计算,可是由于组件结构复杂,而且很多组件并没有固定高度,从而也无法获得准确的高度。
正常思维都是自上而下,先计算出滚动组件以上的高度,结果很困难或者麻烦。
那么我可以逆向思维考虑下:我可以是不是可以通过如下的思路来:
onReady() {
const query = uni.createSelectorQuery().in(this);
query
.select("#balance-block-title") // 要查询的DOM元素的id属性值
.boundingClientRect((data) => {
const window_info = uni.getWindowInfo();
console.log({ data, window_info });
// 计算高度:可使用窗口高度 - 元素底部到页面顶部的距离 - 底部安全区域的高度
this.height = window_info.windowHeight - data.bottom - window_info.safeAreaInsets.bottom
})
.exec();
},
如果计算结果不准确,可以参考下面的思路进行排除。
🔥BuildAdmin是一个永久免费开源,无需授权即可商业使用,且使用了流行技术栈快速创建商业级后台管理系统。