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; // 节点的IDrect.dataset; // 节点的datasetrect.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; // 节点的IDrect.dataset; // 节点的datasetrect.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; // 节点的datasetres.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; // 节点的IDres.dataset; // 节点的datasetres.scrollLeft; // 节点的水平滚动位置res.scrollTop; // 节点的竖直滚动位置}).exec();},
});
👉 立即开发。