微信小程序如何獲取元素節點信息？

1、NodesRef 節點對象

1.一、NodesRef是什麼？

NodesRef 用於獲取 WXML 節點信息的對象

1.二、NodesRef具有的方法？

• NodesRef.fields(Object fields)
  • 獲取節點的相關信息
  • 獲取節點的相關信息
• NodesRef.boundingClientRect()
  • 添加節點的佈局位置的查詢請求
  • 相對於顯示區域，以像素爲單位
  • 功能相似於 DOM 的 getBoundingClientRect
• NodesRef.scrollOffset()
  • 添加節點的滾動位置查詢請求
  • 以像素爲單位
  • 節點必須是 scroll-view 或者 viewport

2、SelectorQuery 查詢節點信息的對象

1.一、 建立SelectorQuery查詢對象

let query = wx.createSelectorQuery()
複製代碼

1.二、SelectorQuery方法

• SelectorQuery.in (對應的組件)

  • 將選擇器的選取範圍更改成自定義組件 component 內
  • 初始時，選擇器僅選取頁面範圍的節點，不會選取任何自定義組件中的節點

• SelectorQuery.select(string selector)

  • 在當前頁面下選擇第一個匹配選擇器 selector 的節點

• SelectorQuery.selectAll()

  • 在當前頁面下選擇匹配選擇器 selector 的全部節點。

• SelectorQuery.selectViewport()

  • 選擇顯示區域
  • 用於獲取顯示區域的尺寸、滾動位置等信息

• SelectorQuery.exec(function callback)

  • 執行全部的請求
  • 請求結果按請求次序構成數組，在callback的第一個參數中返回

3、獲取某個元素節點信息

第一步、 建立SelectorQuery查詢對象

let query = wx.createSelectorQuery()
複製代碼

第二步、 獲取節點對象

• 方法一：query.select(queryString) 選擇第一個匹配節點

• 方法二：query.selectAll(queryString) 選擇全部匹配節點

  • queryString 類型
    • ID選擇器：#the-id
    • class選擇器（能夠連續指定多個）：.a-class.another-class
    • 子元素選擇器：.the-parent > .the-child
    • 後代選擇器：.the-ancestor .the-descendant
    • 跨自定義組件的後代選擇器：.the-ancestor >>> .the-descendant
    • 多選擇器的並集：#a-node, .some-other-nodes

let queryString = '.blue-product>>>.product-list'
let queryNode = query.selectAll(queryString)
複製代碼

第三步、調用節點對象方法

• 獲取節點的相關屬性
• developers.weixin.qq.com/miniprogram…

queryNode.fields({
      id:false,//是否返回節點id
      rect:fasle,//是否返回節點佈局位置
      dataset: true,//返回數據集
      size: true,//返回寬高
      scrollOffset: true,//返回 scrollLeft,scrollTop
      properties: ['scrollX', 'scrollY'],//監聽屬性名
      computedStyle: ['margin', 'backgroundColor']//此處返回指定要返回的樣式名
    }, function(res) {
      console.log(res)
    })
    
    // 返回結果
    [{
        dataset:{},
        width:247,
        height:1065,
        scrollLeft:0,
        scrollTop:0,
        margin:"0px 0px 10px",
        backgroundColor:"rgba(0, 0, 0, 0)",
    },{
        dataset:{},
        width:247,
        height:1065,
        scrollLeft:0,
        scrollTop:0,
        margin:"0px 0px 10px",
        backgroundColor:"rgba(0, 0, 0, 0)",
    },{
        dataset:{},
        width:247,
        height:1065,
        scrollLeft:0,
        scrollTop:0,
        margin:"0px 0px 10px",
        backgroundColor:"rgba(0, 0, 0, 0)",
    }]
    
複製代碼

複製代碼

• 添加節點的佈局位置的查詢請求
• developers.weixin.qq.com/miniprogram…

query.selectAll(queryClass).boundingClientRect(function(rect){
      rect.id      // 節點的ID
      rect.dataset // 節點的dataset
      rect.left    // 節點的左邊界座標
      rect.right   // 節點的右邊界座標
      rect.top     // 節點的上邊界座標
      rect.bottom  // 節點的下邊界座標
      rect.width   // 節點的寬度
      rect.height  // 節點的高度
 })
複製代碼

• 添加節點的滾動位置查詢請求
• developers.weixin.qq.com/miniprogram…

wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
      res.id      // 節點的ID
      res.dataset // 節點的dataset
      res.scrollLeft // 節點的水平滾動位置
      res.scrollTop  // 節點的豎直滾動位置
 })
複製代碼

第四步：可一返回全部的節點信息

query.exec(function(res) {
     console.log(res)
 })
複製代碼