跳到主要内容

useSelectorQuery

获取指定组件或标签的尺寸以及 context

何时使用​

当需要获取组件相关信息时

API​

const [
  query,
  {
    querySelector,
    querySelectorAll,
    selectViewport,
    in,
    exec,
    getBoundingClientRect,
    getContext,
    getFields,
    getNode,
    getScrollOffset,
  }
] = useSelectorQuery();

返回值说明​

返回值说明类型
querySelectorQuery对象实例SelectorQuery
querySelector在当前页面下选择第一个匹配选择器 selector 的节点SelectorQuery['select']
querySelectorAll在当前页面下选择匹配选择器 selector 的所有节点SelectorQuery['selectAll']
selectViewport选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息SelectorQuery['selectViewport']
in将选择器的选取范围更改为自定义组件 component 内SelectorQuery['in']
exec执行所有的请求SelectorQuery['exec']
getBoundingClientRect添加节点的布局位置的查询请求。相对于显示区域，以像素为单位PromiseParamsAction<(selector: string, all?: boolean) => void, NodesRef.BoundingClientRectCallbackResult>
getContext添加节点的 Context 对象查询请求PromiseAction<string, NodesRef.ContextCallbackResult>
getFields获取节点的相关信息。需要获取的字段在 fields 中指定PromiseParamsAction<(selector: string, fields: NodesRef.Fields) => void, TaroGeneral.IAnyObject>
getNode获取 Node 节点实例PromiseAction<string, NodesRef.NodeCallbackResult>
getScrollOffset添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewportPromiseAction<string, NodesRef.ScrollOffsetCallbackResult>

代码演示​

Hook 支持度​

微信小程序H5ReactNative
✔️✔️

FAQ​

  • 为什么获取不到结果, 时有时无?

    官方推荐的获取时机为onReady|useReady时, 若在ready中依然有不稳定因素建议搭配nextTick来确保元素已经渲染完成.