NodesRef

NodesRef

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

方法

SelectorQuery NodesRef.fields(Object fields, function callback)

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

参数

Object fields

function callback

回调函数

参数

Object res

节点的相关信息

返回值

SelectorQuery

示例代码

Page({
    getFields () {
        jd.createSelectorQuery().select('#dom-id').fields({
            dataset: true,
            size: true,
            scrollOffset: true,
            properties: ['scrollX', 'scrollY'],
            computedStyle: ['margin', 'backgroundColor'],
            context: true,
            }, function(res) {
                res.dataset  // 节点的dataset
                res.width   // 节点的宽度
                res.height   // 节点的高度
                res.scrollLeft   // 节点的水平滚动位置
                res.scrollTop  // 节点的竖直滚动位置
                res.scrollX   // 节点 scroll-x 属性的当前值
                res.scrollY   // 节点 scroll-y 属性的当前值
                // 此处返回指定要返回的样式名
                res.margin
                res.backgroundColor
                res.context  // 节点对应的 Context 对象
        }).exec()
    }
})

SelectorQuery NodesRef.boundingClientRect(function callback)

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

参数

function callback

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

参数

Object res

返回值

SelectorQuery

示例代码

Page({
    getRect () {
        jd.createSelectorQuery().select('#dom-id').boundingClientRect(function(rect){ 
            rect.id   // 节点的ID
            rect.dataset  // 节点的dataset
            rect.left   // 节点的左边界坐标
            rect.right   // 节点的右边界坐标
            rect.top    // 节点的上边界坐标
            rect.bottom  // 节点的下边界坐标
            rect.width   // 节点的宽度
            rect.height  // 节点的高度
        }).exec()},
    getAllRects () {
        jd.createSelectorQuery().selectAll('.target-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()
    }
})

SelectorQuery NodesRef.scrollOffset(function callback)

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

参数

function callback

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

参数

Object res

返回值

SelectorQuery

示例代码

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

SelectorQuery NodesRef.node(function callback)

获取 Node 节点实例。目前支持 Canvas 的获取。

参数

function callback

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

参数

Object res

返回值

SelectorQuery

示例代码

Page({
 getNode() {
   jd.createSelectorQuery().select('.canvas').node(function(res){
     console.log(res.node) // 节点对应的 Canvas 实例。
   }).exec()
 }
})

SelectorQuery NodesRef.context(function callback)

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

参数

function callback

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

参数

Object res

返回值

SelectorQuery

示例代码

Page({
  getContext () {
    jd.createSelectorQuery().select('.the-video-class').context(function(res){
      console.log(res.context) // 节点对应的 Context 对象。如：选中的节点是 <video> 组件，那么此处即返回 VideoContext 对象
    }).exec()
  }
})