支付宝小程序API 节点查询

my.createIntersectionObserver

简介

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

使用限制

基础库 1.11.0 或更高版本；支付宝客户端 10.1.32 或更高版本，若版本较低，建议采取兼容处理。

示例代码

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

// .js


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); 
    });
  }
})

入参

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

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

返回值

返回值为 IntersectionObserver。

IntersectionObserver 概览

更新时间：2019-12-18 11:45:26

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

方法

名称	描述
IntersectionObserver.disconnect	停止监听。
IntersectionObserver.observe	指定目标节点，并开始监听相交状态变化情况。
IntersectionObserver.relativeTo	使用选择器指定一个节点，作为参照区域之一。
IntersectionObserver.relativeToViewport	指定页面显示区域作为参照区域之一。

my.createSelectorQuery

简介

my.createSelectorQuery 是用于返回一个 SelectorQuery 对象实例的 API。

使用限制

基础库 1.4.0 或更高版本；支付宝客户端 10.1.8 或更高版本，若版本较低，建议采取兼容处理。

扫码体验

节点查询.jpeg

示例代码

<!-- 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 概览

节点查询对象类。

方法

名称	描述
SelectorQuery.boundingClientRect	将当前选择节点的位置信息放入查询结果。
SelectorQuery.exec	将查询结果放入 Callback 回调中。
SelectorQuery.scrollOffset	将当前选择节点的滚动信息放入查询结果。
SelectorQuery.select	选择当前第一个匹配选择器的节点。
SelectorQuery.selectAll	选择所有匹配选择器的节点。
SelectorQuery.selectViewport	选择窗口对象。