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.height;
}
that.midbox.height = lsktl.ci.windowHeight - ttheight-30;
}); 如下图，我想要盘算box-title和box-bottom的高度，然后再确认中心的可滚动部分，其中头部和底部都有id="box-title"和id="box-bottom"的id的两个盒子。
https://i-blog.csdnimg.cn/direct/d98f8d1a18a84d07a23349a8be9b0c8c.png
就是给要盘算的宽高的盒子加上: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.height;
}
that.midbox.height = lsktl.ci.windowHeight - ttheight-30;
}); });
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]