微信小程式之動態獲取元素寬高

那麼，這個api介面怎麼用呢？

首先，這個介面會返回乙個物件例項。

var obj=wx.createselectorquery();

下面的就是返回的物件例項 obj 的所有內容。

返回的 obj 有五個方法：

1.obj.in(component)：沒用過這個方法，多用於元件的選擇器。

2.obj.select(selector)：獲取指定的節點，selector是css選擇器。返回乙個nodesref物件例項，可以用於獲取節點資訊。

3. obj.selectall(selector)：獲取指定的節點，selector是css選擇器。返回乙個nodesref物件例項，可以用於獲取節點資訊。

上面這兩個我感覺就是 js 中queryselector和queryselectorall的區別。

4. obj.selectviewport()：我沒用過這個方法。官方說是選擇顯示區域，可用於獲取顯示區域的尺寸、滾動位置等資訊。也是返回乙個nodesref物件例項，可以用於獲取節點資訊。

5. exec( function(res){} )：執行所有的請求，請求結果按請求次序構成陣列，在callback的第乙個引數中返回

上面返回的nodesref物件例項就很重要了，它有三個方法：

1. boundingclientrect( function(rect){} )：就是這個方法，能夠動態獲取view元素的高度、寬度等屬性。還有其它的請看官方文件

2. scrolloffset( function(res) {}）：獲取節點的水平、垂直滾動的位置等。節點必須是scroll-view或者viewport

3. fields(fields,function() )：這個可以獲取指定元素的自定義屬性和class名，具體的請看官方文件的說明。

廢話了這麼多，真正的例項用法：

wx.createselectorquery().selectall('.npl-intro').boundingclientrect(function (rect) ).exec()

如果覺得這樣寫有點長。可以分步寫。也是一樣的結果。

var obj=wx.createselectorquery();
obj.selectall('.npl-intro').boundingclientrect(function (rect) )
obj.exec() ;

或者在exec中返回，如果出現上面的方式出現獲取到的rect是null的話，可以考慮用下面這種，就不會出現問題。結果是一樣的。

var obj=wx.createselectorquery();
obj.selectall('.npl-intro').boundingclientrect();
obj.exec(function (rect) ) ;

當然，這方法可以寫在onload、onready、onshow等這些生命週期的方法，也可以寫在自定義的方法裡。什麼時候需要，什麼時候就呼叫。

注意：如果要獲取通過wx:if 和setdata來實現顯示與隱藏的元素，呼叫的這個方法的時候可能出現獲取到的內容為null。我的解決辦法是加個定時器：因為這個獲取元素的方法是非同步的，所以只有拖延點時間再去獲取，不然有可能元素還未載入出來，就呼叫了這個方法，當然返回的結果就是null了。

//動態設定高度
settimeout(function () )
});}, 500)

官方 wx.createselectorquery() 介面

好文要頂

關注我收藏該文

站住，別跑

關注 - 3

粉絲 - 34

+加關注