支付寶小程序API 節(jié)點(diǎn)查詢

my.createIntersectionObserver

簡介

my.createIntersectionObserver 用于創(chuàng)建并返回一個(gè) IntersectionObserver 對象實(shí)例。需在 page.onReady 之后執(zhí)行 my.createIntersectionObserver()。

使用限制

基礎(chǔ)庫 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); // 相交區(qū)域占目標(biāo)節(jié)點(diǎn)的布局區(qū)域的比例
      console.log(res.intersectionRect);  // 相交區(qū)域
      console.log(res.relativeRect);      // 參照區(qū)域的邊界
      console.log(res.boundingClientRect); // 目標(biāo)邊界
      console.log(res.time); // 時(shí)間戳
      console.log(res.id); 
    });
  }
})

入?yún)?/h4>

入?yún)?Object 類型，屬性如下：

屬性	類型	描述
thresholds	Array< Number>	一個(gè)數(shù)值數(shù)組，包含所有閾值。默認(rèn)值為 [0]。
initialRatio	Number	初始的相交比例，如果調(diào)用時(shí)檢測到的相交比例與這個(gè)值不相等且達(dá)到閾值，則會觸發(fā)一次監(jiān)聽器的回調(diào)函數(shù)。默認(rèn)值為 0。
selectAll	Boolean	是否同時(shí)觀測多個(gè)目標(biāo)節(jié)點(diǎn)（而非一個(gè)），如果設(shè)為 true ，observe 的 targetSelector 將選中多個(gè)節(jié)點(diǎn)（注意：同時(shí)選中過多節(jié)點(diǎn)將影響渲染性能）。默認(rèn)值為 false。

返回值

返回值為 IntersectionObserver。

IntersectionObserver 概覽

更新時(shí)間：2019-12-18 11:45:26

IntersectionObserver 對象，用于推斷某些節(jié)點(diǎn)是否可以被用戶看見、有多大比例可以被用戶看見。

方法

my.createSelectorQuery

簡介

my.createSelectorQuery 是用于返回一個(gè) SelectorQuery 對象實(shí)例的 API。

使用限制

基礎(chǔ)庫 1.4.0 或更高版本；支付寶客戶端 10.1.8 或更高版本，若版本較低，建議采取 兼容處理。

掃碼體驗(yàn)

示例代碼

<!-- API-DEMO page/API/create-selector-query/create-selector-query.axml-->
<view class="page">
  <view class="page-description">節(jié)點(diǎn)查詢 API</view>
  <view class="page-section">
    <view className="all">節(jié)點(diǎn) all1</view>
    <view className="all">節(jié)點(diǎn) all2</view>
    <view id="one">節(jié)點(diǎn) one</view>
    <view id="scroll" style="height:200px;overflow: auto">
      <view style="height:400px">獨(dú)立滾動區(qū)域</view>
    </view>
    <button type="primary" onTap="createSelectorQuery">節(jié)點(diǎn)查詢</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 結(jié)構(gòu)

[
  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 概覽

節(jié)點(diǎn)查詢對象類。

方法