小程序获取scroll-view中元素位置

小程序通过数据驱动页面,但是有些情况我们需要获取到页面节点信息,小程序文档中给我们提供了wx.createSelectorQuery()方法,通过这个方法我们可以拿到选择元素的很多信息,当调用wx.createSelectorQuery()方法会得到一个SelectorQuery对象实例然后可以调用这个实例中的很多方法:
in,select,selectAll,selectViewport,exec
这些方法的简述可以查阅开发小程序开发文档

现在简单介绍一下获取页面元素中的class为’site-about-info’的按钮信息
获取布局位置的查询请求调用方法nodesRef.boundingClientRect([callback])

queryMultipleNodes: function(){
    var that = this;
    var aboutArr = [];
    wx.createSelectorQuery().selectAll('.site-about-info').boundingClientRect(function(rects){
      rects.forEach(function(rect){
        console.log(rect.bottom);// 节点的下边界坐标
        aboutArr.push(rect.bottom);
      })
      console.log(aboutArr);
      that.setData({
        aboutArr:aboutArr
      })
    }).exec();
  },

最后如果不调用exec(),其他的方法将不执行,exec()方法中的回调函数返回所有请求(demo中boundingClientRect)的值,并将值放置到数组中

这里需要注意如果在请求后调用此方法需要在方法调用时给个延时,否则可能获取不到数据

参考小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html