小程序 API 能力汇总——TYML NodesRef API

NodesRef

用于获取 TYML 节点信息的对象

方法

SelectorQuery NodesRef.fields(Object fields, NodesRef.FieldsCallback callback)

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

SelectorQuery NodesRef.boundingClientRect(NodesRef.boundingClientRectCallback callback)

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

SelectorQuery NodesRef.scrollOffset(NodesRef.scrollOffsetCallback callback)

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

NodesRef.boundingClientRect(function callback)

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

参数

function callback

回调函数，在执行 SelectorQuery.exec 方法后，节点信息会在 callback 中返回。

参数

Object res

属性	类型	说明
id	string	节点的 ID
dataset	Object	节点的 dataset
left	number	节点的左边界坐标
right	number	节点的右边界坐标
top	number	节点的上边界坐标
bottom	number	节点的下边界坐标
width	number	节点的宽度
height	number	节点的高度

返回值

SelectorQuery

示例代码

Page({
  getRect() {
    ty.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() {
    ty.createSelectorQuery()
      .selectAll('.a-class')
      .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.fields(Object fields, function callback)

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

参数

Object fields

属性	类型	默认值	必填	说明
id	boolean	false	否	是否返回节点 id
dataset	boolean	false	否	是否返回节点 dataset
rect	boolean	false	否	是否返回节点布局位置（left right top bottom）
size	boolean	false	否	是否返回节点尺寸（width height）
scrollOffset	boolean	false	否	是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
properties	Array<string>	[]	否	指定属性名列表，返回节点对应属性名的当前属性值（只能获得组件文档中标注的常规属性值，id class style 和事件绑定的属性值不可获取）
node	boolean	false	否	是否返回节点对应的 Node 实例

function callback

回调函数

参数

Object res

节点的相关信息

返回值

SelectorQuery

示例代码

Page({
  getFields() {
    ty.createSelectorQuery()
      .select('#the-id')
      .fields(
        {
          dataset: true,
          size: true,
          scrollOffset: true,
          properties: ['scrollX', 'scrollY'],
        },
        function (res) {
          res.dataset; // 节点的dataset
          res.width; // 节点的宽度
          res.height; // 节点的高度
          res.scrollLeft; // 节点的水平滚动位置
          res.scrollTop; // 节点的竖直滚动位置
          res.scrollX; // 节点 scroll-x 属性的当前值
          res.scrollY; // 节点 scroll-y 属性的当前值
        },
      )
      .exec();
  },
});

NodesRef.scrollOffset(function callback)

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

参数

function callback

回调函数，在执行 SelectorQuery.exec 方法后，节点信息会在 callback 中返回。

参数

Object res

属性	类型	说明
id	string	节点的 ID
dataset	Object	节点的 dataset
scrollLeft	number	节点的水平滚动位置
scrollTop	number	节点的竖直滚动位置

返回值

SelectorQuery

示例代码

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

👉 立即开发。