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

在微信小程序的開發(fā)中，獲取界面上的節(jié)點信息是一個非常重要的功能。通過節(jié)點信息查詢 API，我們可以輕松地獲取節(jié)點屬性、樣式、以及在界面上的位置等信息。最常見的用法是使用這個接口來查詢某個節(jié)點的當前位置，以及界面的滾動位置。

1. 使用節(jié)點查詢 API 獲取節(jié)點信息

使用 wx.createSelectorQuery() 可以創(chuàng)建 SelectorQuery 對象，該對象有以下方法：

• select(selector): 在當前頁面下選擇第一個匹配選擇器 selector 的節(jié)點，并返回單個 NodeInfo 對象實例。
• selectAll(selector): 在當前頁面下選擇多個匹配選擇器 selector 的節(jié)點，并返回 NodeList 對象實例。
• selectViewport(): 以顯示區(qū)域作為參照，返回 ViewportRect 對象實例。
• exec(callback): 執(zhí)行所有已添加的請求并收集結果，回調函數(shù)會被傳入所有請求的結果。

示例代碼如下：

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

上述代碼中，#the-id 是一個節(jié)點選擇器，在自定義組件或包含自定義組件的頁面中，推薦使用 this.createSelectorQuery() 來代替 wx.createSelectorQuery()，這樣可以確保在正確的范圍內選擇節(jié)點。

2. 使用節(jié)點布局相交狀態(tài) API 監(jiān)聽節(jié)點狀態(tài)

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

使用 wx.createIntersectionObserver() 可以創(chuàng)建 IntersectionObserver 對象，該對象有以下方法：

• relativeTo(selector): 指定參照節(jié)點，在它的布局區(qū)域內才會觸發(fā)相交狀態(tài)變化事件。
• relativeToViewport(): 以顯示區(qū)域作為參照，可以觀測到目標節(jié)點在顯示區(qū)域內的相交狀態(tài)變化。
• observe(selector, callback): 開始監(jiān)聽相交狀態(tài)變化，當某個目標節(jié)點的相交狀態(tài)變化時，就會執(zhí)行回調函數(shù)。
• disconnect(): 停止監(jiān)聽相交狀態(tài)變化。
• relativeToSelectorQuery(query): 用于指定選擇器查詢實例作為參照區(qū)域之一。

下面是一個示例代碼，可以在目標節(jié)點每次進入或離開頁面顯示區(qū)域時，觸發(fā)回調函數(shù)：

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

下面是另一個示例代碼，可以在目標節(jié)點與參照節(jié)點在頁面顯示區(qū)域內相交或相離，且相交或相離程度達到目標節(jié)點布局區(qū)域的20%和50%時，觸發(fā)

<本文由himall原創(chuàng)，商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請標明：himall原創(chuàng)>