微信小程序--queryselector获取不到节点信息解决方案

问题解析:

 	var query = wx.createSelectorQuery();
    query.select('.wrap').boundingClientRect(function (qry) {                       
    	var h = qry.height;//此处提示错误:不能获取null的height
    }).exec();

解决方案:
延时获取就可以了。
代码演示:

 //数据库获取标记数据
        util.dbOPerateFn('Pub/mark','','get',function(res){
           // var res =this.data.projects;        
            if(res.length){
                var query = wx.createSelectorQuery();
              
                setTimeout(function(){
                    query.select('.wrap').boundingClientRect(function (qry) {                       
                        var h = qry.height;//此处可以成功获取到数据
                    }).exec();
                },1000)
            }
        })

解决原理:
因为query.select('.wrap').boundingClientRect(); 是一个异步返回的,所以要延时获取。
总结:
网上的解答实在让我感到头大,说出了原理,没有代码演示,让我不知从何下手,自己琢磨着还真给弄出来了,再次把解决方案放上来,给自己一个提醒,也给需要的人能更好的解决提供帮助。

微信小程序中,我们可以使用 `wx.createSelectorQuery()` 方法来获取页面中的节点信息。相较于 `document.querySelector()`,它更加适用于小程序的开发环境。 `wx.createSelectorQuery()` 方法返回一个 `SelectorQuery` 对象,我们可以通过它的方法来获取节点信息。例如,如果我们要获取 `id` 为 `myCanvas` 的 `canvas` 元素,可以这样写: ``` wx.createSelectorQuery().select('#myCanvas').node(function(res){ console.log(res.node) // 返回一个canvas节点的对象 }).exec() ``` 上面的代码中,`select()` 方法用来指定要获取节点,传入一个 CSS 选择器字符串。`node()` 方法用来获取节点信息,它的回调函数的参数 `res` 中包含了节点信息。最后,调用 `exec()` 方法来执行查询操作。 需要注意的是,`wx.createSelectorQuery()` 方法是一个异步方法,所以我们不能直接在它后面使用返回值。而是需要在回调函数中处理查询结果。 另外,如果你想要获取多个节点信息,可以使用 `selectAll()` 方法来选择多个节点,然后使用 `node()` 方法来获取每个节点信息。例如: ``` wx.createSelectorQuery().selectAll('.my-class').node(function(res){ console.log(res) // 返回一个数组,包含每个节点信息 }).exec() ``` 上面的代码中,`selectAll()` 方法用来选择多个类名为 `my-class` 的节点,传入一个 CSS 选择器字符串。`node()` 方法用来获取节点信息,它的回调函数的参数 `res` 中包含了一个数组,每个元素是一个节点信息
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值