小程序模板網(wǎng)

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

發(fā)布時間:2018-09-11 15:52 所屬欄目:小程序開發(fā)教程

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

那么,這個api接口怎么用呢?

首先,這個接口會返回一個對象實(shí)例。

var obj=wx.createSelectorQuery(); 


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

 

返回的 obj 有五個方法:

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

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

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

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

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

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

上面返回的 NodesRef 對象實(shí)例就很重要了,它有三個方法:

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

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

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

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

 

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

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

 

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

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

 官方 wx.createSelectorQuery() 接口 



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24797.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢