獲取介面上的節點資訊

WXML節點資訊

節點資訊查詢 API 可以用於獲取節點屬性、樣式、在介面上的位置等資訊。

最常見的用法是使用這個介面來查詢某個節點的當前位置，以及介面的滾動位置。

示例程式碼：

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
  res.top // #the-id 節點的上邊界座標（相對於顯示區域）
})
query.selectViewport().scrollOffset(function
 
(res){
  res.scrollTop // 顯示區域的豎直滾動位置
})
query.exec()

上述示例中， #the-id 是一個節點選擇器，與 CSS 的選擇器相近但略有區別，請參見 SelectorQuery.select 的相關說明。

在自定義元件中，推薦使用 this.createSelectorQuery 來代替 wx.createSelectorQuery ，這樣會將選擇器選取範圍定在這個自定義元件內。

WXML節點佈局相交狀態

節點佈局相交狀態 API 可用於監聽兩個或多個元件節點在佈局位置上的相交狀態。這一組API常常可以用於推斷某些節點是否可以被使用者看見、有多大比例可以被使用者看見。

這一組API涉及的主要概念如下。

• 參照節點：監聽的參照節點，取它的佈局區域作為參照區域。如果有多個參照節點，則會取它們佈局區域的 交集 作為參照區域。頁面顯示區域也可作為參照區域之一。
• 目標節點：監聽的目標，預設只能是一個節點（使用 selectAll 選項時，可以同時監聽多個節點）。
• 相交區域：目標節點的佈局區域與參照區域的相交區域。
• 相交比例：相交區域佔參照區域的比例。
• 閾值：相交比例如果達到閾值，則會觸發監聽器的回撥函式。閾值可以有多個。

以下示例程式碼可以在目標節點（用選擇器 .target-class

示例程式碼：

Page({
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
      res.id // 目標節點 id
      res.dataset // 目標節點 dataset
      res.intersectionRatio // 相交區域佔目標節點的佈局區域的比例
      res.intersectionRect // 相交區域
      res.intersectionRect.left // 相交區域的左邊界座標
      res.intersectionRect.top // 相交區域的上邊界座標
      res.intersectionRect.width // 相交區域的寬度
      res.intersectionRect.height // 相交區域的高度
    })
  }
})

以下示例程式碼可以在目標節點（用選擇器 .target-class 指定）與參照節點（用選擇器 .relative-class 指定）在頁面顯示區域內相交或相離，且相交或相離程度達到目標節點佈局區域的20%和50%時，觸發回撥函式。

示例程式碼：

Page({
  onLoad: function(){
    wx.createIntersectionObserver(this, {
      thresholds: [0.2, 0.5]
    }).relativeTo('.relative-class').relativeToViewport().observe('.target-class', (res) => {
      res.intersectionRatio // 相交區域佔目標節點的佈局區域的比例
      res.intersectionRect // 相交區域
      res.intersectionRect.left // 相交區域的左邊界座標
      res.intersectionRect.top // 相交區域的上邊界座標
      res.intersectionRect.width // 相交區域的寬度
      res.intersectionRect.height // 相交區域的高度
    })
  }
})

在自定微信小程式義元件中，推薦使用 this.createIntersectionObserver 來代替 wx.createIntersectionObserver ，這樣會將選擇器選取範圍定在這個自定義元件內。