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 对象的方法列表

方法名输入数据类型返回值
incomponent 对象自定义对象实例SelectorQuery
selectselectorStringNodesRef
selectAllselectorStringNodesRef
selectViewportNodesRef
execcallbackFunction

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

属性数据类型描述
idString节点的 ID
datasetObject节点的 dataset
leftNumber节点的左边界坐标
rightNumber节点的右边界坐标
topNumber节点的上边界坐标
bottomNumber节点的下边界坐标
widthNumber节点的宽度
heightNumber节点的高度

添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 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

返回参数:

属性数据类型描述
idString节点的 ID
datasetObject节点的 dataset
scrollLeftNumber节点的水平滚动位置
scrollTopNumber节点的竖直滚动位置
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。

返回参数:

属性数据类型默认值属性描述
idBooleanfalseoptional是否返回节点 id
datasetBooleanfalseoptional是否返回节点 dataset
rectBooleanfalseoptional是否返回节点布局位置(left right top bottom)
sizeBooleanfalseoptional是否返回节点尺寸(width height)
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();
  }
});
点击纠错