【小程序】節點操做

節點操做

不能使用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使用 、 節點操做 、 頁面跳轉 、 緩存

  前端架構淺談

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