uniapp利用createSelectorQuery,boundingClientRect获取宽度和高度不精确的 ...

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

1.   const query = uni.createSelectorQuery().in(this);
2.                 query.select("#box-bottom").boundingClientRect();
3.                 query.select("#box-title").boundingClientRect();
4.                 query.exec(function (res) {
5.                     var ttheight = 0;
6.                     for (var i in res) {
7.                         ttheight += res[i].height;
8.                     }
9.                     that.midbox.height = lsktl.ci.windowHeight - ttheight-30;
10.                 });

复制代码

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

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

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

复制代码

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