微信小程序之動(dòng)態(tài)獲取元素寬度高度

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

那么，這個(gè)api接口怎么用呢？

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

var obj=wx.createSelectorQuery(); 

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

1. obj.in(component)：沒(méi)用過(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è)我感覺(jué)就是 js 中querySelector和querySelectorAll的區(qū)別。

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

2. 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ō)明。

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

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

如果覺(jué)得這樣寫(xiě)有點(diǎn)長(zhǎng)?？梢苑植綄?xiě)。也是一樣的結(jié)果。

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

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