• nodesRef.fields(fields, [callback])
    • 示例代码
    • API支持度

    nodesRef.fields(fields, [callback])

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

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

    注意： computedStyle 的优先级高于 size，当同时在 computedStyle 里指定了 width/height 和传入了 size: true，则优先返回 computedStyle 获取到的 width/height。

    示例代码

    1. import Taro from '@tarojs/taro'
    3. Taro.createSelectorQuery()
    4.   .select('#the-id')
    5.   .fields({
    6.     dataset: true,
    7.     size: true,
    8.     scrollOffset: true,
    9.     properties: ['scrollX', 'scrollY'],
    10.     computedStyle: ['margin', 'backgroundColor']
    11.   }, res => {
    12.     res.dataset    // 节点的 dataset
    13.     res.width      // 节点的宽度
    14.     res.height     // 节点的高度
    15.     res.scrollLeft // 节点的水平滚动位置
    16.     res.scrollTop  // 节点的竖直滚动位置
    17.     res.scrollX    // 节点 scroll-x 属性的当前值
    18.     res.scrollY    // 节点 scroll-y 属性的当前值
    19.     // 此处返回指定要返回的样式名
    20.     res.margin
    21.     res.backgroundColor
    22.   })
    23.   .exec()

    API支持度

    API微信小程序H5React Native
    selectorQuery.in✔️✔️
    selectorQuery.select✔️✔️
    selectorQuery.selectAll✔️✔️
    selectorQuery.selectViewport✔️✔️
    nodesRef.boundingClientRect✔️✔️
    nodesRef.scrollOffset✔️✔️
    nodesRef.fields✔️✔️
    selectorQuery.exec✔️✔️