微信小程序動態獲取元素寬度高度的方法

本文小編為大家詳細介紹“微信小程序動態獲取元素寬度高度的方法”，內容詳細，步驟清晰，細節處理妥當，希望這篇“微信小程序動態獲取元素寬度高度的方法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

首先，這個接口會返回一個對象實例。

var obj=wx.createSelectorQuery(); 

返回的 obj 有五個方法：

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

2. obj.select(selector)：獲取指定的節點，selector是css選擇器。返回一個 NodesRef 對象實例，可以用于獲取節點信息。

3. obj.selectAll(selector)：獲取指定的節點，selector是css選擇器。返回一個 NodesRef 對象實例，可以用于獲取節點信息。

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

1. obj.selectViewport()：我沒用過這個方法。官方說是選擇顯示區域，可用于獲取顯示區域的尺寸、滾動位置等信息。也是返回一個 NodesRef 對象實例，可以用于獲取節點信息。

2. exec( function(res){} )：執行所有的請求，請求結果按請求次序構成數組，在callback的第一個參數中返回

上面返回的 NodesRef 對象實例就很重要了，它有三個方法：

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

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

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

廢話了這么多，真正的實例用法：

wx.createSelectorQuery().selectAll('.npl-intro').boundingClientRect(function (rect) {console.log(rect[0].height)console.log(rect[0].width)}).exec()

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

var obj=wx.createSelectorQuery();obj.selectAll('.npl-intro').boundingClientRect(function (rect) {console.log(rect[0].height)console.log(rect[0].width)})obj.exec() ;

當然，這方法可以寫在onLoad、onReady、onShow等這些生命周期的方法，也可以寫在自定義的方法里。什么時候需要，什么時候就調用。

讀到這里，這篇“微信小程序動態獲取元素寬度高度的方法”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。