小程序boundingClientRect 不打印数据解决办法

问题描述

获取组件的高度信息,以下代码的 console.log是不执行的

let query = wx.createSelectorQuery();
query.select('.find').boundingClientRect(res => {
    console.log(res.height);  
 })

解决办法 exec()

在代码最后再调用 exec()方法,即可打印数据

let query = wx.createSelectorQuery();
query.select('.find').boundingClientRect(res => {
    console.log(res.height);   // 1545.7249755859375
 }).exec();

exec方法详解

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在微信小程序中,可以使用boundingClientRect()方法获取页面元素的位置和大小信息。该方法可以通过选择器指定要获取信息的元素,然后返回一个包含元素位置和大小信息的对象。具体的步骤如下: 1. 使用wx.createSelectorQuery()方法创建一个选择器查询对象。 2. 使用select()方法指定要获取信息的元素,并通过CSS选择器选择元素。例如,可以使用"#the-id"来选择id为"the-id"的元素。 3. 调用boundingClientRect()方法,并传入一个回调函数,该函数将在获取到元素信息后被调用。在回调函数中,可以通过参数rect来获取元素的位置和大小信息。rect对象包含以下属性:id、dataset、left、right、top、bottom、width和height。 4. 调用exec()方法执行选择器查询。 示例代码如下: ``` wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ // 在这里可以使用rect对象获取元素的位置和大小信息 var elementId = rect.id; // 元素的ID var elementDataset = rect.dataset; // 元素的dataset var elementLeft = rect.left; // 元素的左边界坐标 var elementRight = rect.right; // 元素的右边界坐标 var elementTop = rect.top; // 元素的上边界坐标 var elementBottom = rect.bottom; // 元素的下边界坐标 var elementWidth = rect.width; // 元素的宽度 var elementHeight = rect.height; // 元素的高度 // 在这里可以根据需要进行后续操作 }).exec(); ``` 需要注意的是,微信小程序中使用boundingClientRect()方法获取元素位置的高度可能不准确,官方没有给出明确的解决方式。因此,在使用该方法时,可能需要对返回的位置信息进行处理或校正,以满足具体需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值