关于微信小程序的boundingClientRect用法

微信小程序提供了 wx.createSelectorQuery 接口，用于获取 WXML 节点信息。其中，boundingClientRect 方法可以获取某个节点的布局位置和尺寸信息。 boundingClientRect 方法接受一个回调函数作为参数，该函数在获取节点信息成功时被调用，并且将节点的布局位置和尺寸信息作为参数传递给该函数。如下所示的代码片段演示了如何使用 boundingClientRect 方法获取节点信息：

wx.createSelectorQuery().select('.box').boundingClientRect(function(rect) {
  console.log(rect);
}).exec();

 

上述代码中，select 方法用于选择一个节点，并将该节点的选择器传递给该方法。在这个例子中，我们选择了一个类名为 box 的节点。当 exec 方法被调用时，微信小程序将会执行选择器查询，并将查询结果传递给 boundingClientRect 方法所传递的回调函数。在这个例子中，我们将获取到的节点信息 rect 打印到控制台中。 在实际应用中，我们可能需要获取多个节点的信息，或者需要获取某些节点的父节点或子节点的信息。在这种情况下，我们可以使用 selectAll 方法来选择多个节点，并使用 boundingClientRect 方法来获取这些节点的信息。如下所示的代码片段演示了如何获取多个节点的信息：

wx.createSelectorQuery().selectAll('.item').boundingClientRect(function(rects) {
  rects.forEach(function(rect) {
    console.log(rect);
  });
}).exec();

 

上述代码中，selectAll 方法用于选择多个节点，并将节点的选择器传递给该方法。在这个例子中，我们选择了类名为 item 的所有节点。当 exec 方法被调用时，微信小程序将会执行选择器查询，并将查询结果传递给 boundingClientRect 方法所传递的回调函数。在这个例子中，我们将获取到的所有节点的信息打印到控制台中。 需要注意的是，boundingClientRect 方法只能在 wx.createSelectorQuery().exec() 的回调函数中执行，因为节点信息的获取是异步的。同时，由于节点信息的获取是异步的，我们需要保证在获取节点信息之前，该节点已经被渲染到页面上。通常情况下，我们可以在 onReady 生命周期函数中获取节点信息。