qidao123.com技术社区-IT企服评测·应用市场

标题: uniapp利用createSelectorQuery,boundingClientRect获取宽度和高度不精确的可用的办理方案 [打印本页]

作者: 三尺非寒 时间: 2025-4-19 06:06
标题: uniapp利用createSelectorQuery,boundingClientRect获取宽度和高度不精确的可用的办理方案
场景展示：
uniapp利用createSelectorQuery,boundingClientRect获取宽度和高度不精确的可用的办理方案，正常来说，利用下面的代码是可以精确获得宽高的，但是内里含有图片，在图片没有加载完的环境下，我们可以想像一下，盘算出来的效果肯定是不对的。而且我也在网上找了不少的办理方案。大多数是说有padding和margin,再利用getComputedStyle如许的函数。显得都太复杂，经过摸索实验，最终的办理方案比较简单：

const query = uni.createSelectorQuery().in(this);
query.select("#box-bottom").boundingClientRect();
query.select("#box-title").boundingClientRect();
query.exec(function (res) {
var ttheight = 0;
for (var i in res) {
ttheight += res[i].height;
}
that.midbox.height = lsktl.ci.windowHeight - ttheight-30;
});

复制代码

如下图，我想要盘算box-title和box-bottom的高度，然后再确认中心的可滚动部分，其中头部和底部都有id="box-title"和id="box-bottom"的id的两个盒子。

就是给要盘算的宽高的盒子加上:key="key",如许的话，就可以精确得到宽和高了。
代码如下：

that.kklist.bottom=lsktl.rndstr(); that.kklist.title=lsktl.rndstr(); that.$nextTick(function () { const query = uni.createSelectorQuery().in(this);
query.select("#box-bottom").boundingClientRect();
query.select("#box-title").boundingClientRect();
query.exec(function (res) {
var ttheight = 0;
for (var i in res) {
ttheight += res[i].height;
}
that.midbox.height = lsktl.ci.windowHeight - ttheight-30;
}); });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)