NodesRef

页面节点信息的对象

方法

SelectorQuery NodesRef.fields(Object fields, Function callback)

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

参数

参数	类型	默认值	必填	说明
fields	Object		是	需要获取的字段对象
callback	Function		是	获取的回调函数

fields

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

NodesRef.fields.callback(Object res)

参数	类型	默认值	必填	说明
res	Object		否	返回的节点相关信息，与fields设置一致，具体查看下方示例代码

SelectorQuery NodesRef.boundingClientRect(Function callback)

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

NodesRef.boundingClientRect.callback(Object res)

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

SelectorQuery NodesRef.scrollOffset(Function callback)

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

NodesRef.scrollOffset.callback(Object res)

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

SelectorQuery NodesRef.context(Function callback)

添加节点的 Context 对象查询请求。目前支持 VideoContext、CanvasContext、[EditorContext] 和 [MapContext] 的获取。

NodesRef.context.callback(Object res)

属性	类型	说明
context	Object	节点对应的 Context 对象。对象的属性和方法，查看具体 Context 说明

SelectorQuery NodesRef.node(Function callback)

获取 Node 节点实例。

NodesRef.context.callback(Object res)

属性	类型	说明
node	Object	节点对应的 Node 实例对象。

示例代码：

//创建选择器对象
var query = mc.createSelectorQuery();
var nodesRef = query.select('#query_test');

//添加节点的相关信息查询
nodesRef.fields({
    id: true,
    dataset: true,
    mark: true,
    rect: true,
    size: true,
    scrollOffset: true,
    properties: ['class'],
    computedStyle: ['font'],
    context: true,
    node: true
}, (res) => {
    console.log('fields.callback', res);
});

//添加节点布局位置查询
nodesRef.boundingClientRect((res) => {
    console.log('boundingClientRect.callback', res);
});

//添加节点滚动位置查询
nodesRef.scrollOffset((res) => {
    console.log('scrollOffset.callback', res);
});

//添加节点 Context 查询
nodesRef.context((res) => {
    console.log('context.callback', res);
});

//添加节点 Node 对象查询
nodesRef.node((res) => {
    console.log('node.callback', res);
});

//执行查询
nodesRef..exec((res) => {
    console.log('exec', res);
    this.setData({
    execInfo: JSON.stringify(res, null, 2)
    })
});

Keyboard shortcuts

开发文档