本文實例講述了微信小程序?qū)崿F(xiàn)動態(tài)獲取元素寬高的方法。分享給大家供大家參考，具體如下：

我以前一直以為微信小程序不能動態(tài)獲取view元素的寬高。但是自從看到： wx.createSelectorQuery() 這個api接口，以前的某些問題就能得到解決了。。。

那么，這個api接口怎么用呢？

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

var obj=wx.createSelectorQuery();

下面的就是返回的對象實例 obj 的所有內(nèi)容。

返回的 obj 有五個方法：

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

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

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

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

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

5. exec( function(res){} )：執(zhí)行所有的請求，請求結(jié)果按請求次序構(gòu)成數(shù)組，在callback的第一個參數(shù)中返回

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

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

2. scrollOffset( function(res) {})：獲取節(jié)點的水平、垂直滾動的位置等。節(jié)點必須是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()

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

var obj=wx.createSelectorQuery();

obj.selectAll('.npl-intro').boundingClientRect(function (rect) {

console.log(rect[0].height)

console.log(rect[0].width)

})

obj.exec() ;

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

var obj=wx.createSelectorQuery();

obj.selectAll('.npl-intro').boundingClientRect();

obj.exec(function (rect) {

console.log(rect[0].height)

console.log(rect[0].width)

}) ;

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

注意：如果要獲取通過wx:if 和setData來實現(xiàn)顯示與隱藏的元素，調(diào)用的這個方法的時候可能出現(xiàn)獲取到的內(nèi)容為null。我的解決辦法是加個定時器：因為這個獲取元素的方法是異步的，所以只有拖延點時間再去獲取，不然有可能元素還未加載出來，就調(diào)用了這個方法，當(dāng)然返回的結(jié)果就是null了。

//動態(tài)設(shè)置高度

setTimeout(function () {

var query = wx.createSelectorQuery();

query.select('.nd-btnBox').boundingClientRect();

query.exec(function (rect) {

if (rect[0] === null) return;

that.setData({

marginBM: rect[0].height + 10

})

});

}, 500)

希望本文所述對大家微信小程序開發(fā)有所幫助。

總結(jié)

以上是默认站点為你收集整理的微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得默认站点網(wǎng)站內(nèi)容還不錯，歡迎將默认站点推薦給好友。