全部产品
云市场
云游戏

节点查询

更新时间:2020-07-07 19:42:04

my.createIntersectionObserver

创建并返回一个 IntersectionObserver 对象实例。需在 page.onReady 之后执行 my.createIntersectionObserver()

版本要求: 基础库 1.11.0 或更高版本,若版本较低,建议做 兼容处理

入参

入参为 Object 类型,属性如下:

属性 类型 默认值 描述
thresholds Array<Number> [0] 一个数值数组,包含所有阈值。
initialRatio Number 0 初始的相交比例,如果调用时检测到的相交比例与这个值不相等且达到阈值,则会触发一次监听器的回调函数。
selectAll Boolean false 是否同时观测多个目标节点(而非一个),如果设为 true ,observe 的 targetSelector 将选中多个节点(注意:同时选中过多节点将影响渲染性能)。

返回值

  1. IntersectionObserver

示例代码

  1. <!-- .axml -->
  2. <view class="logo" style='width: 200px;height: 200px;background-color:blue'>11</view>
  1. Page({
  2. onReady() {
  3. my.createIntersectionObserver().relativeToViewport({top: 100, bottom: 100}).observe('.logo', (res) => {
  4. console.log(res, 'intersectionObserver');
  5. console.log(res.intersectionRatio); // 相交区域占目标节点的布局区域的比例
  6. console.log(res.intersectionRect); // 相交区域
  7. console.log(res.relativeRect); // 参照区域的边界
  8. console.log(res.boundingClientRect); // 目标边界
  9. console.log(res.time); // 时间戳
  10. console.log(res.id);
  11. });
  12. }
  13. })

IntersectionObserver

IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

IntersectionObserver.disconnect

停止监听。回调函数将不再触发。

IntersectionObserver.observe

指定目标节点并开始监听相交状态变化情况。

入参

入参结构为:(string targetSelector, function callback)

  • String targetSelector,选择器。
  • Function callback,监听相交状态变化的回调函数。

callback 参数

Object res 属性

属性 类型 描述
intersectionRatio Number 相交比例。
intersectionRect Object 相交区域的边界。
boundingClientRect Object 目标边界。
relativeRect Object 参照区域的边界。
time Number 相交检测时的时间戳。

res.intersectionRect 属性

属性 类型 描述
left Number 左边界。
right Number 右边界。
top Number 上边界。
bottom Number 下边界。

res.boundingClientRect 属性

属性 类型 描述
left Number 左边界。
right Number 右边界。
top Number 上边界。
bottom Number 下边界。

res.relativeRect 属性

属性 类型 描述
left Number 左边界。
right Number 右边界。
top Number 上边界。
bottom Number 下边界。

IntersectionObserver.relativeTo

使用选择器指定一个节点,作为参照区域之一。

入参

入参结构为:(String selector,Object margins)

  • String selector,选择器。
  • Object margins,用来扩展(或收缩)参照节点布局区域的边界,属性如下:
属性 类型 必填 描述
left Number 节点布局区域的左边界。
right Number 节点布局区域的右边界。
top Number 节点布局区域的上边界。
bottom Number 节点布局区域的下边界。

IntersectionObserver.relativeToViewport

指定页面显示区域作为参照区域之一。

入参

入参为 Object margins,用来扩展(或收缩)参照节点布局区域的边界,属性如下:

属性 类型 必填 描述
left Number 节点布局区域的左边界。
right Number 节点布局区域的右边界。
top Number 节点布局区域的上边界。
bottom Number 节点布局区域的下边界。

my.createSelectorQuery

说明:基础库 1.4.0 及以上版本,mPaaS 10.1.32 及以上版本支持该接口。


获取一个节点查询对象 SelectorQuery

参数说明

参数名 类型 说明
params object 可以指定 page 属性,默认为当前页面。

代码示例

  1. <!-- API-DEMO page/API/create-selector-query/create-selector-query.axml-->
  2. <view class="page">
  3. <view class="page-description">节点查询 API</view>
  4. <view class="page-section">
  5. <view className="all">节点 all1</view>
  6. <view className="all">节点 all2</view>
  7. <view id="one">节点 one</view>
  8. <view id="scroll" style="height:200px;overflow: auto">
  9. <view style="height:400px">独立滚动区域</view>
  10. </view>
  11. <button type="primary" onTap="createSelectorQuery">节点查询</button>
  12. </view>
  13. </view>
  1. // API-DEMO page/API/create-selector-query/create-selector-query.js
  2. Page({
  3. createSelectorQuery() {
  4. my.createSelectorQuery()
  5. .select('#non-exists').boundingClientRect()
  6. .select('#one').boundingClientRect()
  7. .selectAll('.all').boundingClientRect()
  8. .select('#scroll').scrollOffset()
  9. .selectViewport().boundingClientRect()
  10. .selectViewport().scrollOffset().exec((ret) => {
  11. console.log(ret);
  12. my.alert({
  13. content: JSON.stringify(ret, null, 2),
  14. });
  15. })
  16. },
  17. });

ret 结构

  1. [
  2. null,
  3. {
  4. "x": 1,
  5. "y": 2,
  6. "width": 1367,
  7. "height": 18,
  8. "top": 2,
  9. "right": 1368,
  10. "bottom": 20,
  11. "left": 1
  12. },
  13. [
  14. {
  15. "x": 1,
  16. "y": -34,
  17. "width": 1367,
  18. "height": 18,
  19. "top": -34,
  20. "right": 1368,
  21. "bottom": -16,
  22. "left": 1
  23. },
  24. {
  25. "x": 1,
  26. "y": -16,
  27. "width": 1367,
  28. "height": 18,
  29. "top": -16,
  30. "right": 1368,
  31. "bottom": 2,
  32. "left": 1
  33. }
  34. ],
  35. {
  36. "scrollTop": 0,
  37. "scrollLeft": 0
  38. },
  39. {
  40. "width": 1384,
  41. "height": 360
  42. },
  43. {
  44. "scrollTop": 35,
  45. "scrollLeft": 0
  46. }
  47. ]

SelectorQuery

节点查询对象类,包含以下方法:

selectorQuery.select(selector)

选择当前第一个匹配选择器的节点,选择器支持 ID 选择器以及 class 选择器。

selectorQuery.selectAll(selector)

选择所有匹配选择器的节点,选择器支持 ID 选择器以及 class 选择器。

selectorQuery.selectViewport()

选择窗口对象。

selectorQuery.boundingClientRect()

将当前选择节点的位置信息放入查询结果,类似 dom 的 getBoundingClientRect, 返回对象包含 width、height、left、top、bottom、right。如果当前节点为窗口对象,则只返回 width、height。

selectorQuery.scrollOffset()

将当前选择节点的滚动信息放入查询结果,返回对象包含 scrollTop、scrollLeft。

selectorQuery.exec(callback)

将查询结果放入 callback 回调中。查询结果为数组,每项为一次查询的结果,如果当前是节点列表,则单次查询结果也为数组。注意,exec 必须放到 Page onReady 后调用。