开发
API

NodesRef.fields

添加节点的相关信息的查询,在 fields 中指定需要获取的字段。

语法

nodesRef.fields(fields[, callback])

参数说明

object fields

对象类型,属性如下:

属性名类型默认值必填说明最低支持版本
idbooleanfalse是否返回节点的 ID1.7.0
datasetbooleanfalse是否返回节点的 dataset1.7.0
rectbooleanfalse是否返回节点布局位置(left right top bottom)1.7.0
sizebooleanfalse是否返回节点尺寸(width height)1.7.0
scrollOffsetbooleanfalse是否返回节点的滚动位置信息(scrollLeft scrollTop),节点必须是 scroll-view 或者 viewport1.7.0
nodebooleanfalse是否返回节点对应的 Node 实例,当前仅支持新方案 canvas 实例的获取1.78.0

注:新方案 canvas 是指定了合法的 type 属性的 canvas 组件,详细见 canvas 组件 文档。

function callback

回调函数(可选)。

回调函数接受的第一个参数为 object 类型,代表查询结果,属性如下:

参数参数类型说明
idstring节点的 ID
datasetobject节点的 dataset
leftnumber节点的左边界坐标
rightnumber节点的右边界坐标
topnumber节点的上边界坐标
bottomnumber节点的下边界坐标
widthnumber节点的宽度
heightnumber节点的高度
scrollLeftnumber节点的水平滚动位置
scrollTopnumber节点的竖直滚动位置

返回值

SelectorQuery

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

JavaScript

<button id="myButton" data-key="bytedance" type="primary" size="default" bindtap="getButton">
  获取当前button实例
</button>
<button type="primary" size="default" bindtap="getCanvas">获取 canvas实例</button>
<canvas type="2d" id="myCanvas"></canvas>
<view>{{componentInfo}}</view>
let canvas, canvasCtx;
Page({
  data: {
    componentInfo: "",
  },
  onReady() {
    const query = tt.createSelectorQuery();
    query
      .select("#myCanvas")
      .fields({
        node: true,
      })
      .exec((res) => {
        canvas = res[0].node;
        canvasCtx = canvas.getContext("2d");
        canvasCtx.font = "20px Georgia";
        canvasCtx.fillStyle = "red";
        canvasCtx.fillText("byteDance", 0, 50);
      });
  },
  getButton() {
    tt.createSelectorQuery()
      .select("#myButton")
      .fields({
        id: true,
        dataset: true,
        rect: true,
        size: true,
        scrollOffset: true,
      })
      .exec((res) => {
        const buttonNode = res[0];
        console.log(buttonNode);
        const {
          id, // 节点的 ID
          dataset, // 节点的 dataset
          left, // 节点的左边界坐标
          right, // 节点的右边界坐标
          top, // 节点的上边界坐标
          bottom, // 节点的下边界坐标
          width, // 节点的宽度
          height, // 节点的高度
          scrollLeft, // 节点的水平滚动位置
          scrollTop, // 节点的竖直滚动位置
        } = buttonNode;
        const buttonInfo = `当前button的信息:id: ${id}; width: ${width}px, height: ${height}px; 位置信息:top: ${top}px, left: ${left}px, bottom: ${bottom}px, right: ${right}px; data: ${JSON.stringify(
          dataset,
        )}`;
        this.setData({
          componentInfo: buttonInfo,
        });
      });
  },
  getCanvas() {
    tt.createSelectorQuery()
      .select("#myCanvas")
      .fields({
        node: true,
      })
      .exec((res) => {
        const canvasNode = res[0];
        const canvasInfo = `canvas 类型: ${canvasNode.nodeCanvasType};`;
        this.setData({
          componentInfo: canvasInfo,
        });
      });
  },
});
点击纠错
评价此篇文档