Mobile Platform as a Service：節點查詢

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)

選擇當前第一個匹配選取器的節點，選取器支援 識別碼選取器以及 class 選取器。

selectorQuery.selectAll(selector)

選擇所有匹配選取器的節點，選取器支援 識別碼選取器以及 class 選取器。

selectorQuery.selectViewport()

選擇視窗對象。

selectorQuery.boundingClientRect()

將當前選擇節點的位置資訊放入查詢結果，類似 dom 的 getBoundingClientRect， 返回對象包含 width、height、left、top、bottom、right。如果當前節點為視窗對象，則只返回 width、height。

selectorQuery.scrollOffset()

將當前選擇節點的滾動資訊放入查詢結果，返回對象包含 scrollTop、scrollLeft。

selectorQuery.exec(callback)

將查詢結果放入 callback 回調中。查詢結果為數組，每項為一次查詢的結果，如果當前是節點列表，則單次查詢結果也為數組。