微信小程序 獲取界面上的節(jié)點信息

獲取界面上的節(jié)點信息

WXML節(jié)點信息

節(jié)點信息查詢 API 可以用于獲取節(jié)點屬性、樣式、在界面上的位置等信息。

最常見的用法是使用這個接口來查詢某個節(jié)點的當(dāng)前位置，以及界面的滾動位置。

示例代碼：

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

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

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

WXML節(jié)點布局相交狀態(tài)

節(jié)點布局相交狀態(tài) API 可用于監(jiān)聽兩個或多個組件節(jié)點在布局位置上的相交狀態(tài)。這一組API常?？梢杂糜谕茢嗄承┕?jié)點是否可以被用戶看見、有多大比例可以被用戶看見。

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

• 參照節(jié)點：監(jiān)聽的參照節(jié)點，取它的布局區(qū)域作為參照區(qū)域。如果有多個參照節(jié)點，則會取它們布局區(qū)域的 交集 作為參照區(qū)域。頁面顯示區(qū)域也可作為參照區(qū)域之一。
• 目標(biāo)節(jié)點：監(jiān)聽的目標(biāo)，默認(rèn)只能是一個節(jié)點（使用 selectAll 選項時，可以同時監(jiān)聽多個節(jié)點）。
• 相交區(qū)域：目標(biāo)節(jié)點的布局區(qū)域與參照區(qū)域的相交區(qū)域。
• 相交比例：相交區(qū)域占參照區(qū)域的比例。
• 閾值：相交比例如果達(dá)到閾值，則會觸發(fā)監(jiān)聽器的回調(diào)函數(shù)。閾值可以有多個。

以下示例代碼可以在目標(biāo)節(jié)點（用選擇器 .target-class 指定）每次進(jìn)入或離開頁面顯示區(qū)域時，觸發(fā)回調(diào)函數(shù)。

示例代碼：

Page({
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
      res.id // 目標(biāo)節(jié)點 id
      res.dataset // 目標(biāo)節(jié)點 dataset
      res.intersectionRatio // 相交區(qū)域占目標(biāo)節(jié)點的布局區(qū)域的比例
      res.intersectionRect // 相交區(qū)域
      res.intersectionRect.left // 相交區(qū)域的左邊界坐標(biāo)
      res.intersectionRect.top // 相交區(qū)域的上邊界坐標(biāo)
      res.intersectionRect.width // 相交區(qū)域的寬度
      res.intersectionRect.height // 相交區(qū)域的高度
    })
  }
})

以下示例代碼可以在目標(biāo)節(jié)點（用選擇器 .target-class 指定）與參照節(jié)點（用選擇器 .relative-class 指定）在頁面顯示區(qū)域內(nèi)相交或相離，且相交或相離程度達(dá)到目標(biāo)節(jié)點布局區(qū)域的20%和50%時，觸發(fā)回調(diào)函數(shù)。

示例代碼：

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

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

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