【小程序】節點操作

節點操作

不能使用window.document對象，所以無法操作Dom，操作節點可以使用wx.createSelectorQuery()

SelectorQuery wx.createSelectorQuery()

返回一個 SelectorQuery 對象實例。

在自定義組件或包含自定義組件的頁面中，應使用 this.createSelectorQuery() 來代替。也可以使用SelectorQuery SelectorQuery.in(Component component)將選擇器的選取范圍更改為自定義組件 component 內。

var query = wx.createSelectorQuery() // 創建節點查詢器 query query.select('#the-id').boundingClientRect()// 選擇Id=the-id的節點，獲取節點位置信息的查詢請求 query.selectViewport().scrollOffset() // 獲取頁面滑動位置的查詢請求 query.exec(function(res){ res[0].top // #the-id節點的上邊界坐標 res[1].scrollTop // 顯示區域的豎直滾動位置 }) 

SeletorQuery

NodesRef SelectorQuery.select(string selector)

在當前頁面下選擇第一個匹配選擇器 selector 的節點。返回一個 NodesRef 對象實例，可以用於獲取節點信息。

NodesRef SelectorQuery.selectAll(string selector)

在當前頁面下選擇匹配選擇器 selector 的所有節點。

 

selector類似於 CSS 的選擇器，但僅支持下列語法。

• 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

NodesRef SelectorQuery.selectViewport()

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

NodesRef SelectorQuery.exec(function callback)

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

NodesRef

SelectorQuery NodesRef.boundingClientRect(function callback)

添加節點的布局位置的查詢請求。相對於顯示區域，以像素為單位。其功能類似於 DOM 的 getBoundingClientRect。返回 NodesRef 對應的 SelectorQuery。

屬性	類型	說明
id	string	節點的 ID
dataset	Object	節點的 dataset
left	number	節點的左邊界坐標
right	number	節點的右邊界坐標
top	number	節點的上邊界坐標
bottom	number	節點的下邊界坐標
width	number	節點的寬度
height	number	節點的高度

Page({
  getRect() {
    wx.createSelectorQuery().select('#the-id').boundingClientRect(function (rect) { rect.id // 節點的ID rect.dataset // 節點的dataset rect.left // 節點的左邊界坐標 rect.right // 節點的右邊界坐標 rect.top // 節點的上邊界坐標 rect.bottom // 節點的下邊界坐標 rect.width // 節點的寬度 rect.height // 節點的高度 }).exec() }, getAllRects() { wx.createSelectorQuery().selectAll('.a-class').boundingClientRect(function (rects) { rects.forEach(function (rect) { rect.id // 節點的ID rect.dataset // 節點的dataset rect.left // 節點的左邊界坐標 rect.right // 節點的右邊界坐標 rect.top // 節點的上邊界坐標 rect.bottom // 節點的下邊界坐標 rect.width // 節點的寬度 rect.height // 節點的高度 }) }).exec() } }) 

SelectorQuery NodesRef.scrollOffset(function callback)

添加節點的滾動位置查詢請求。以像素為單位。節點必須是 scroll-view 或者 viewport，返回 NodesRef 對應的 SelectorQuery。

屬性	類型	說明
id	string	節點的 ID
dataset	Object	節點的 dataset
scrollLeft	number	節點的水平滾動位置
scrollTop	number	節點的豎直滾動位置

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

SelectorQuery NodesRef.context(function callback)

添加節點的 Context 對象查詢請求。目前支持 VideoContext、CanvasContext、LivePlayerContext 和 MapContext 的獲取。

屬性	類型	說明
context	Object	節點對應的 Context 對象

Page({
  getContext() {
    wx.createSelectorQuery().select('.the-video-class').context(function (res) { console.log(res.context) // 節點對應的 Context 對象。如：選中的節點是 <video> 組件，那么此處即返回 VideoContext 對象 }).exec() } }) 

NodesRef.fields(Object fields)

獲取節點的相關信息。需要獲取的字段在fields中指定。返回值是 nodesRef 對應的 selectorQuery

屬性|類型|默認值|必填|說明 id|boolean|false|否|是否返回節點 id dataset|boolean|false|否|是否返回節點 dataset rect|boolean|false|否|是否返回節點布局位置（left right top bottom） size|boolean|false|否|是否返回節點尺寸（width height） scrollOffset|boolean|false|否|是否返回節點的 scrollLeft scrollTop，節點必須是 scroll-view 或者 viewport properties|Array.|[]|否|指定屬性名列表，返回節點對應屬性名的當前屬性值（只能獲得組件文檔中標注的常規屬性值，id class style 和事件綁定的屬性值不可獲取） computedStyle|Array.|[]|否|指定樣式名列表，返回節點對應樣式名的當前值 context|boolean|false|否|是否返回節點對應的 Context 對象

Page({
  getFields() {
    wx.createSelectorQuery().select('#the-id').fields({ dataset: true, size: true, scrollOffset: true, properties: ['scrollX', 'scrollY'], computedStyle: ['margin', 'backgroundColor'], context: true, }, function (res) { res.dataset // 節點的dataset res.width // 節點的寬度 res.height // 節點的高度 res.scrollLeft // 節點的水平滾動位置 res.scrollTop // 節點的豎直滾動位置 res.scrollX // 節點 scroll-x 屬性的當前值 res.scrollY // 節點 scroll-y 屬性的當前值 // 此處返回指定要返回的樣式名 res.margin res.backgroundColor res.context // 節點對應的 Context 對象 }).exec() } }) 

SelectorQuery NodesRef.context(function callback)

添加節點的 Context 對象查詢請求。目前支持 VideoContext、CanvasContext、LivePlayerContext 和 MapContext 的獲取。

Page({
  getContext() {
    wx.createSelectorQuery().select('.the-video-class').context(function (res) { console.log(res.context) // 節點對應的 Context 對象。如：選中的節點是 <video> 組件，那么此處即返回 VideoContext 對象 }).exec() } })

 

----------------------------------------

小程序系列：

  前言

  項目結構

  生命周期

  請求與封裝

  數據綁定

  事件

  基礎使用： component使用 、 wxs使用 、 節點操作 、 頁面跳轉 、 緩存

  前端架構淺談

----------------------------------------