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

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

WXML節(jié)點(diǎn)信息

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

最常見(jiàn)的用法是使用這個(gè)接口來(lái)查詢(xún)某個(gè)節(jié)點(diǎn)的當(dāng)前位置，以及界面的滾動(dòng)位置。

示例代碼：

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

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

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

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

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

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

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

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

示例代碼：

Page({
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
      res.id // 目標(biāo)節(jié)點(diǎn) id
      res.dataset // 目標(biāo)節(jié)點(diǎn) dataset
      res.intersectionRatio // 相交區(qū)域占目標(biāo)節(jié)點(diǎn)的布局區(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é)點(diǎn)（用選擇器 .target-class 指定）與參照節(jié)點(diǎn)（用選擇器 .relative-class 指定）在頁(yè)面顯示區(qū)域內(nèi)相交或相離，且相交或相離程度達(dá)到目標(biāo)節(jié)點(diǎn)布局區(qū)域的20%和50%時(shí)，觸發(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é)點(diǎn)的布局區(qū)域的比例
      res.intersectionRect // 相交區(qū)域
      res.intersectionRect.left // 相交區(qū)域的左邊界坐標(biāo)
      res.intersectionRect.top // 相交區(qū)域的上邊界坐標(biāo)
      res.intersectionRect.width // 相交區(qū)域的寬度
      res.intersectionRect.height // 相交區(qū)域的高度
    })
  }
})

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

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