您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序如何獲取節(jié)點,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
基礎(chǔ)庫 1.4.0 開始支持,低版本需做兼容處理
返回一個SelectorQuery對象實例??梢栽谶@個實例上使用select
等方法選擇節(jié)點,并使用boundingClientRect
等方法選擇需要查詢的信息。
示例代碼:
Page({ queryMultipleNodes: function(){var query = wx.createSelectorQuery() query.select('#the-id').boundingClientRect() query.selectViewport().scrollOffset() query.exec(function(res){ res[0].top // #the-id節(jié)點的上邊界坐標(biāo) res[1].scrollTop // 顯示區(qū)域的豎直滾動位置}) } })
selectorQuery 對象的方法列表:
方法 | 參數(shù) | 說明 |
---|---|---|
select | selector | 參考下面詳細(xì)介紹 |
selectAll | selector | 參考下面詳細(xì)介紹 |
selectViewport | 參考下面詳細(xì)介紹 | |
exec | [callback] | 參考下面詳細(xì)介紹 |
在當(dāng)前頁面下選擇第一個匹配選擇器selector
的節(jié)點,返回一個NodesRef
對象實例,可以用于獲取節(jié)點信息。
selector
類似于CSS的選擇器,但僅支持下列語法。
ID選擇器:#the-id
class選擇器(可以連續(xù)指定多個):.a-class.another-class
子元素選擇器:.the-parent > #the-child.a-class
多選擇器的并集:#a-node, .some-other-nodes
在當(dāng)前頁面下選擇匹配選擇器selector
的節(jié)點,返回一個NodesRef
對象實例。 與selectorQuery.selectNode(selector)
不同的是,它選擇所有匹配選擇器的節(jié)點。
選擇顯示區(qū)域,可用于獲取顯示區(qū)域的尺寸、滾動位置等信息,返回一個NodesRef
對象實例。
添加節(jié)點的布局位置的查詢請求,相對于顯示區(qū)域,以像素為單位。其功能類似于DOM的getBoundingClientRect。返回值是nodesRef對應(yīng)的selectorQuery。
返回的節(jié)點信息中,每個節(jié)點的位置用left
、right
、top
、bottom
、width
、height
字段描述。如果提供了callback回調(diào)函數(shù),在執(zhí)行selectQuery的exec方法后,節(jié)點信息會在callback中返回。
示例代碼:
Page({ getRect: function(){ wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ rect.id // 節(jié)點的ID rect.dataset // 節(jié)點的dataset rect.left // 節(jié)點的左邊界坐標(biāo) rect.right // 節(jié)點的右邊界坐標(biāo) rect.top // 節(jié)點的上邊界坐標(biāo) rect.bottom // 節(jié)點的下邊界坐標(biāo) rect.width // 節(jié)點的寬度 rect.height // 節(jié)點的高度}).exec() }, getAllRects: function(){ wx.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){ rects.forEach(function(rect){ rect.id // 節(jié)點的IDrect.dataset // 節(jié)點的datasetrect.left // 節(jié)點的左邊界坐標(biāo)rect.right // 節(jié)點的右邊界坐標(biāo)rect.top // 節(jié)點的上邊界坐標(biāo)rect.bottom // 節(jié)點的下邊界坐標(biāo)rect.width // 節(jié)點的寬度rect.height // 節(jié)點的高度 }) }).exec() } })
添加節(jié)點的滾動位置查詢請求,以像素為單位。節(jié)點必須是scroll-view
或者viewport。返回值是nodesRef對應(yīng)的selectorQuery。
返回的節(jié)點信息中,每個節(jié)點的滾動位置用scrollLeft
、scrollHeight
字段描述。如果提供了callback回調(diào)函數(shù),在執(zhí)行selectQuery的exec方法后,節(jié)點信息會在callback中返回。
示例代碼:
Page({ getScrollOffset: function(){ wx.createSelectorQuery().selectViewport().scrollOffset(function(res){ res.id // 節(jié)點的ID res.dataset // 節(jié)點的dataset res.scrollLeft // 節(jié)點的水平滾動位置 res.scrollTop // 節(jié)點的豎直滾動位置}).exec() } })
獲取節(jié)點的相關(guān)信息,需要獲取的字段在fields
中指定。返回值是nodesRef對應(yīng)的selectorQuery。可指定獲取的字段包括:
字段名 | 默認(rèn)值 | 說明 |
---|---|---|
id | 否 |
是否返回節(jié)點id |
dataset | 否 |
是否返回節(jié)點dataset |
rect | 否 |
是否返回節(jié)點布局位置(left right top bottom ) |
size | 否 |
是否返回節(jié)點尺寸(width height ) |
scrollOffset | 否 |
是否返回節(jié)點的 scrollLeft scrollTop ,節(jié)點必須是scroll-view 或者viewport |
properties | [] |
指定屬性名列表,返回節(jié)點對應(yīng)屬性名的當(dāng)前屬性值(只能獲得組件文檔中標(biāo)注的常規(guī)屬性值, id class style 和事件綁定的屬性值不可獲?。?/td> |
示例代碼:
Page({ getFields: function(){ wx.createSelectorQuery().select('#the-id').fields({ dataset: true, size: true, scrollOffset: true, properties: ['scrollX', 'scrollY'] }, function(res){ res.dataset // 節(jié)點的dataset res.width // 節(jié)點的寬度 res.height // 節(jié)點的高度 res.scrollLeft // 節(jié)點的水平滾動位置 res.scrollTop // 節(jié)點的豎直滾動位置 res.scrollX // 節(jié)點 scroll-x 屬性的當(dāng)前值 res.scrollY // 節(jié)點 scroll-x 屬性的當(dāng)前值}).exec() } })
執(zhí)行所有的請求,請求結(jié)果按請求次序構(gòu)成數(shù)組,在callback的第一個參數(shù)中返回。
以上是“微信小程序如何獲取節(jié)點”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。