[小程序] boundingClientRect 获取不到数据(null) exec得到null, 小程序获取不到dom元素

1,821 阅读1分钟

问题

今天在开发小程序时遇到一个问题, 我需要获取页面某个元素信息时,通过官方方式获取获取不到元素

小程序文档

我的

 lifetimes: {
        attached: () => {
            // 创建查询器 
            let _query = wx.createSelectorQuery();

            // 查询元素
            _query.select('#democlass').boundingClientRect()
            .exec(eles => {
                // 获取到元素信息
                console.log(eles)
            })
        }
   },

获取到得节点对象 null

解决

通过查询后得知解决问题的两个关键点

1、自定义组件中获取元素节点时不能使用wx.createSelectQuery(), 因为在自定义组件中此方法在this对象中了(使用this.createSelectQuery()

2、不能使用箭头函数, 因为this调用指向改变了

更改

 lifetimes: {
        attached: function () {
            let _query = this.createSelectorQuery();
            _query.select('#democlass').boundingClientRect()
            .exec(eles => {
                console.log(eles)
            })
            
            // _query.select() => 用于查询节点元素, 传入选择器信息
            // _query.boundingClientRect() => 添加节点的布局位置的查询请求 在这里是查询所有元素信息
            // _query.exec() => 执行所有的请求。请求结果按请求次序构成数组 得到指定查询信息
        }
   },

再次获取可以获取到节点信息

{id: "democlass", dataset: {…}, left: 10, right: 365.20001220703125, top: 150, …}