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

方法名 输入 数据类型 返回值
in component 对象 自定义对象实例 SelectorQuery
select selector String NodesRef
selectAll selector String NodesRef
selectViewport NodesRef
exec callback Function

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

属性 数据类型 描述
id String 节点的 ID
dataset Object 节点的 dataset
left Number 节点的左边界坐标
right Number 节点的右边界坐标
top Number 节点的上边界坐标
bottom Number 节点的下边界坐标
width Number 节点的宽度
height Number 节点的高度

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

返回参数:

属性 数据类型 描述
id String 节点的 ID
dataset Object 节点的 dataset
scrollLeft Number 节点的水平滚动位置
scrollTop Number 节点的竖直滚动位置
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。

返回参数:

属性 数据类型 默认值 属性 描述
id Boolean false optional 是否返回节点 id
dataset Boolean false optional 是否返回节点 dataset
rect Boolean false optional 是否返回节点布局位置(left right top bottom)
size Boolean false optional 是否返回节点尺寸(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()
  }
});