小程序框架之視圖層 View~獲取界面節點信息

獲取界面上的節點信息

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 // 相交區域的高度
    })
  }
})

注意：與頁面顯示區域的相交區域並不准確代表用戶可見的區域，因為參與計算的區域是“布局區域”，布局區域可能會在繪制時被其他節點裁剪隱藏（如遇祖先節點中 overflow 樣式為 hidden 的節點）或遮蓋（如遇 fixed 定位的節點）。

在自定義組件或包含自定義組件的頁面中，推薦使用 this.createIntersectionObserver 來代替 wx.createIntersectionObserver ，這樣可以確保在正確的范圍內選擇節點。

 

 

 

.