uni.createSelectorQuery()获取元素height获取不到或者与调试工具实际测量不一致

vue3使用 in()  

• 支付宝小程序不支持 in(component)，使用无效果

import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance();

const query = uni.createSelectorQuery().in(instance.proxy);
query
  .select("#id")
  .boundingClientRect((data) => {
    console.log("得到布局位置信息" + JSON.stringify(data));
    console.log("节点离页面顶部的距离为" + data.top);
  })
  .exec();

 

先看原始写法

onShow(){
       uni.createSelectorQuery().selectAll('#item-box-dom').boundingClientRect(data => {
        console.log('data,data，data，data',data);
        let headHeight = data[0].top
        this.rightDomBottom = data.map((v,index) => {
            return v.bottom-headHeight
        })
        console.log('this.rightDomBottom',this.rightDomBottom);
    }).exec();
}

onReady(){
    this.$nextTick(()=>{
        setTimeout(()=>{
            uni.createSelectorQuery().selectAll('#item-box-dom').boundingClientRect(data => {
                console.log('data,data，data，data',data);
                let headHeight = data[0].top
                this.rightDomBottom = data.map((v,index) => {
                    return v.bottom-headHeight
                })
                console.log('this.rightDomBottom',this.rightDomBottom);
            }).exec();
        },500)
    })
},

 

uni.createSelectorQuery()获取节点高度不准确

onReady() {
           // 这个是我需要动态改变高度和距离顶部的高度的盒子 
            let div = document.querySelector(".center-class");
            let that = this
            // 获取屏幕的高度
            uni.getSystemInfo({
                success(res) {
                    setTimeout(() => {
                        // 屏幕高度
                        let screenHeight = res.screenHeight
                        // 顶部高度
                        uni.createSelectorQuery().select('.top-class').boundingClientRect(data => {
                            that.topHeight = data.height
                            console.log(data)
                        }).exec()

                        // 底部
                        uni.createSelectorQuery().select('.bottom-class').boundingClientRect(data => {
                            let bottomHeight = data.height
                            that.centerHeight =
                                `calc(100% - ${that.topHeight}px - ${bottomHeight}px)`
                            console.log(that.topHeight, bottomHeight)
                            // 修改盒子的样式
                            that.$nextTick(() => {
                                div.style.height = that.centerHeight
                                div.style.top = (that.topHeight - 10) + "px" 
                            })
                        }).exec()
                    }, 10)

                }
            })

        },

https://blog.csdn.net/qq_46131497/article/details/140439002

https://blog.csdn.net/f2424004764/article/details/145234319

https://blog.csdn.net/swag_12581/article/details/137543411