如何利用小程序api接口動(dòng)態(tài)獲取元素寬高

這篇文章主要介紹了如何利用小程序api接口動(dòng)態(tài)獲取元素寬高，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

通過(guò) wx.createSelectorQuery() api接口可以讓微信小程序動(dòng)態(tài)獲取view元素的寬高。

api接口的使用：

首先，這個(gè)接口會(huì)返回一個(gè)對(duì)象實(shí)例。

var obj=wx.createSelectorQuery();

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

返回的 obj 有五個(gè)方法：

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

2.   obj.select(selector)：獲取指定的節(jié)點(diǎn)，selector是css選擇器。返回一個(gè) NodesRef 對(duì)象實(shí)例，可以用于獲取節(jié)點(diǎn)信息。

3.  obj.selectAll(selector)：獲取指定的節(jié)點(diǎn)，selector是css選擇器。返回一個(gè) NodesRef 對(duì)象實(shí)例，可以用于獲取節(jié)點(diǎn)信息。

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

4. obj.selectViewport()：我沒用過(guò)這個(gè)方法。官方說(shuō)是選擇顯示區(qū)域，可用于獲取顯示區(qū)域的尺寸、滾動(dòng)位置等信息。也是返回一個(gè) NodesRef 對(duì)象實(shí)例，可以用于獲取節(jié)點(diǎn)信息。

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

上面返回的 NodesRef 對(duì)象實(shí)例就很重要了，它有三個(gè)方法：

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

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

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

（學(xué)習(xí)視頻分享：編程入門）

廢話了這么多，真正的實(shí)例用法：

如果覺得這樣寫有點(diǎn)長(zhǎng)?？梢苑植綄憽Ｒ彩且粯拥慕Y(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 的話，可以考慮用下面這種，就不會(huì)出現(xiàn)問(wè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等這些生命周期的方法，也可以寫在自定義的方法里。什么時(shí)候需要，什么時(shí)候就調(diào)用。

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

//動(dòng)態(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)

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何利用小程序api接口動(dòng)態(tài)獲取元素寬高”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!