基础库 1.7.0 开始支持本方法，这是一个同步方法。
添加节点的相关信息的查询，在 fields 中指定需要获取的字段。
如果提供了 callback 回调函数，在执行 SelectQuery.exec 方法后，节点信息会在 callback 中返回。
语法
nodesRef.fields(fields, callback)参数说明
fields
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|
Fields | 是 | 指定查询的节点信息内容 | 1.7.0 |
Fields 类型说明
object 类型，属性如下：
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
id | boolean | false | 否 | 是否返回节点的 ID | 1.7.0 |
dataset | boolean | false | 否 | 是否返回节点的 dataset | 1.7.0 |
rect | boolean | false | 否 | 是否返回节点布局位置（left、right、top、bottom） | 1.7.0 |
size | boolean | false | 否 | 是否返回节点尺寸（width、height） | 1.7.0 |
scrollOffset | boolean | false | 否 | 是否返回节点的滚动位置信息（scrollLeft、scrollTop），节点必须是 scroll-view 或者 | 1.7.0 |
node | boolean | false | 否 | 是否返回节点对应的 Node 实例，当前仅支持新方案 canvas 实例的获取 | 1.78.0 |
computedStyle | string[] | [] | 否 | 指定样式名列表，返回节点对应样式名的当前值 | 2.13.0 |
注：新方案 canvas 是指定了合法的 type 属性的 canvas 组件，详细见 canvas 组件 文档。
callback
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|
function | 否 | 回调函数 | 1.7.0 |
回调函数参数说明
object 类型，代表查询结果，属性如下：
参数 | 参数类型 | 说明 | 最低支持版本 |
|---|---|---|---|
id | string | 节点的 ID | 1.7.0 |
dataset | object | 节点的 dataset | 1.7.0 |
left | number | 节点的左边界坐标 | 1.7.0 |
right | number | 节点的右边界坐标 | 1.7.0 |
top | number | 节点的上边界坐标 | 1.7.0 |
bottom | number | 节点的下边界坐标 | 1.7.0 |
width | number | 节点的宽度 | 1.7.0 |
height | number | 节点的高度 | 1.7.0 |
scrollLeft | number | 节点的水平滚动位置 | 1.7.0 |
scrollTop | number | 节点的竖直滚动位置 | 1.7.0 |
返回值
扫码体验
代码示例
<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, }); }); }, });复制代码Bug & Tip
无