节点查询

my.createIntersectionObserver

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

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

入参

入参为 Object 类型，属性如下：

返回值

IntersectionObserver

示例代码

<!-- .axml -->
<view class="logo" style='width: 200px;height: 200px;background-color:blue'>11</view>

Page({
  onReady() {
    my.createIntersectionObserver().relativeToViewport({top: 100, bottom: 100}).observe('.logo', (res) => {
      console.log(res, 'intersectionObserver');
        console.log(res.intersectionRatio); // 相交区域占目标节点的布局区域的比例
        console.log(res.intersectionRect);  // 相交区域
        console.log(res.relativeRect);      // 参照区域的边界
        console.log(res.boundingClientRect); // 目标边界
        console.log(res.time); // 时间戳
        console.log(res.id);
    });
  }
})

IntersectionObserver

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

IntersectionObserver.disconnect

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

IntersectionObserver.observe

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

入参

入参结构为：(String targetSelector, function callback)

• String targetSelector，选择器。

• Function callback，监听相交状态变化的回调函数。

callback 参数

Object res 属性

res.intersectionRect 属性

res.boundingClientRect 属性

res.relativeRect 属性

IntersectionObserver.relativeTo

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

入参

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

• String selector，选择器。

• Object margins，用来扩展（或收缩）参照节点布局区域的边界，属性如下：

IntersectionObserver.relativeToViewport

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

入参

入参为 Object margins，用来扩展（或收缩）参照节点布局区域的边界，属性如下：

my.createSelectorQuery

获取一个节点查询对象 SelectorQuery。

参数说明

代码示例

<!-- API-DEMO page/API/create-selector-query/create-selector-query.axml-->
<view class="page">
  <view class="page-description">节点查询 API</view>
  <view class="page-section">
    <view className="all">节点 all1</view>
    <view className="all">节点 all2</view>
    <view id="one">节点 one</view>
    <view id="scroll" style="height:200px;overflow: auto">
      <view style="height:400px">独立滚动区域</view>
    </view>
    <button type="primary" onTap="createSelectorQuery">节点查询</button>
  </view>
</view>

// API-DEMO page/API/create-selector-query/create-selector-query.js
Page({
  createSelectorQuery() {
    my.createSelectorQuery()
      .select('#non-exists').boundingClientRect()
      .select('#one').boundingClientRect()
      .selectAll('.all').boundingClientRect()
      .select('#scroll').scrollOffset()
      .selectViewport().boundingClientRect()
      .selectViewport().scrollOffset().exec((ret) => {
      console.log(ret);
      my.alert({
        content: JSON.stringify(ret, null, 2),
      });
    })
  },
});

ret 结构

[
  null,
  {
    "x": 1,
    "y": 2,
    "width": 1367,
    "height": 18,
    "top": 2,
    "right": 1368,
    "bottom": 20,
    "left": 1
  },
  [
    {
      "x": 1,
      "y": -34,
      "width": 1367,
      "height": 18,
      "top": -34,
      "right": 1368,
      "bottom": -16,
      "left": 1
    },
    {
      "x": 1,
      "y": -16,
      "width": 1367,
      "height": 18,
      "top": -16,
      "right": 1368,
      "bottom": 2,
      "left": 1
    }
  ],
  {
    "scrollTop": 0,
    "scrollLeft": 0
  },
  {
    "width": 1384,
    "height": 360
  },
  {
    "scrollTop": 35,
    "scrollLeft": 0
  }
]

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 回调中。查询结果为数组，每项为一次查询的结果，如果当前是节点列表，则单次查询结果也为数组。