tt.createSelectorQuery

基础库 1.7.0 开始支持本方法，低版本需做兼容处理。

返回一个 selectorQuery 对象实例。

输出

SelectorQuery

代码示例

const query = tt.createSelectorQuery();
query.select("#the-id").boundingClientRect();
query.selectViewport().scrollOffset();
query.exec(function(res) {
  res[0].top; // #the-id节点的上边界坐标
  res[1].scrollTop; // 显示区域的竖直滚动位置
});

SelectorQuery 对象

SelectorQuery 对象的方法列表

selectorQuery.in

将选择器的选取范围更改为自定义组件 component 内（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

Component({
  queryMultipleNodes() {
    const query = tt.createSelectorQuery().in(this);
    query
      .select("#the-id")
      .boundingClientRect(function(res) {
        res.top; // 这个组件内 #the-id 节点的上边界坐标
      })
      .exec();
  }
});

select

在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。

selectAll

在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。

selectViewport

选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。

exec

执行所有的请求。请求结果按请求次序构成数组，在 callback 的第一个参数中返回。

NodesRef 对象

nodesRef.boundingClientRect

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 nodesRef 对应的 SelectorQuery。如果提供了 callback 回调函数，在执行 selectQuery.exec 方法后，节点信息会在 callback 中返回。

Page({
  getRect() {
    tt.createSelectorQuery()
      .select("#the-id")
      .boundingClientRect(function(rect) {
        rect.id; // 节点的ID
        rect.dataset; // 节点的dataset
        rect.left; // 节点的左边界坐标
        rect.right; // 节点的右边界坐标
        rect.top; // 节点的上边界坐标
        rect.bottom; // 节点的下边界坐标
        rect.width; // 节点的宽度
        rect.height; // 节点的高度
      })
      .exec();
  },
  getAllRects() {
    tt.createSelectorQuery()
      .selectAll(".class-name")
      .boundingClientRect(function(rects) {
        rects.forEach(function(rect) {
          rect.id; // 节点的ID
          rect.dataset; // 节点的dataset
          rect.left; // 节点的左边界坐标
          rect.right; // 节点的右边界坐标
          rect.top; // 节点的上边界坐标
          rect.bottom; // 节点的下边界坐标
          rect.width; // 节点的宽度
          rect.height; // 节点的高度
        });
      })
      .exec();
  }
});

nodesRef.scrollOffset

添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport，返回 nodesRef 对应的 SelectorQuery。

返回参数:

Page({
  getScrollOffset: function() {
    tt.createSelectorQuery()
      .selectViewport()
      .scrollOffset(function(res) {
        res.id; // 节点的ID
        res.dataset; // 节点的dataset
        res.scrollLeft; // 节点的水平滚动位置
        res.scrollTop; // 节点的竖直滚动位置
      })
      .exec();
  }
});

nodesRef.fields

获取节点的相关信息。需要获取的字段在 fields 中指定。返回值是 nodesRef 对应的 selectorQuery。

返回参数：

Page({
  getFields: function() {
    tt.createSelectorQuery()
      .select("#the-id")
      .fields(
        {
          id: true,
          dataset: true,
          size: true
        },
        function(res) {
          res.id; //节点的ID
          res.dataset; // 节点的dataset
          res.width; // 节点的宽度
          res.height; // 节点的高度
        }
      )
      .exec();
  }
});