欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)動(dòng)態(tài)獲取元素寬高的方法分析

 更新時(shí)間:2018年12月10日 14:27:52   作者:站住,別跑  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)獲取元素寬高的方法,結(jié)合實(shí)例形式分析了微信小程序動(dòng)態(tài)獲取、設(shè)置元素寬高的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了微信小程序?qū)崿F(xiàn)動(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();

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

返回的 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ū)別。

4. obj.selectViewport():我沒(méi)用過(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ō)明。

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

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

如果覺(jué)得這樣寫(xiě)有點(diǎn)長(zhǎng)??梢苑植綄?xiě)。也是一樣的結(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à),可以考慮用下面這種,就不會(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)然,這方法可以寫(xiě)在onLoad、onReady、onShow等這些生命周期的方法,也可以寫(xiě)在自定義的方法里。什么時(shí)候需要,什么時(shí)候就調(diào)用。

注意:如果要獲取通過(guò)wx:ifsetData來(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)

官方 wx.createSelectorQuery() 接口

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

相關(guān)文章

  • 用js實(shí)現(xiàn)放大鏡效果

    用js實(shí)現(xiàn)放大鏡效果

    這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)放大鏡效果,利用背景圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • JavaScript enum枚舉類(lèi)型定義及使用方法

    JavaScript enum枚舉類(lèi)型定義及使用方法

    這篇文章主要介紹了JavaScript enum枚舉類(lèi)型定義及使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-05-05
  • 微信jssdk踩坑之簽名錯(cuò)誤invalid signature

    微信jssdk踩坑之簽名錯(cuò)誤invalid signature

    這篇文章主要介紹了微信jssdk踩坑之簽名錯(cuò)誤invalid signature,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法

    JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法

    這篇文章主要介紹了JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法,實(shí)例分析了javascript操作鼠標(biāo)事件及css樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-02-02
  • d3.js中冷門(mén)卻實(shí)用的內(nèi)置函數(shù)總結(jié)

    d3.js中冷門(mén)卻實(shí)用的內(nèi)置函數(shù)總結(jié)

    D3.js是一個(gè)JavaScript庫(kù),它可以通過(guò)數(shù)據(jù)來(lái)操作文檔。D3可以通過(guò)使用HTML、SVG和CSS把數(shù)據(jù)鮮活形象地展現(xiàn)出來(lái)。d3.js其實(shí)提供了很多內(nèi)置的函數(shù),可以卻被大家忽略了,下面這篇文章就來(lái)給大家詳細(xì)介紹了d3.js中冷門(mén)卻實(shí)用的一些內(nèi)置函數(shù),需要的朋友可以參考借鑒。
    2017-02-02
  • 自定義PC微信掃碼登錄樣式寫(xiě)法

    自定義PC微信掃碼登錄樣式寫(xiě)法

    這篇文章主要介紹了自定義PC微信掃碼登錄樣式的寫(xiě)法以及做了代碼分析,需要的朋友學(xué)習(xí)下吧。
    2017-12-12
  • JS實(shí)現(xiàn)移動(dòng)端上下滑動(dòng)一次一屏

    JS實(shí)現(xiàn)移動(dòng)端上下滑動(dòng)一次一屏

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)移動(dòng)端上下滑動(dòng)一次一屏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • 基于Bootstrap實(shí)現(xiàn)圖片輪播效果

    基于Bootstrap實(shí)現(xiàn)圖片輪播效果

    這篇文章主要為大家詳細(xì)介紹了基于bootstrap實(shí)現(xiàn)圖片輪播效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的朋友可以參考一下
    2016-05-05
  • 微信小程序結(jié)合Storage實(shí)現(xiàn)搜索歷史效果

    微信小程序結(jié)合Storage實(shí)現(xiàn)搜索歷史效果

    這篇文章主要為大家詳細(xì)介紹了微信小程序結(jié)合Storage實(shí)現(xiàn)搜索歷史效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-05-05
  • 基于javascript實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能

    基于javascript實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能

    這篇文章主要介紹了基于javascript實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的相關(guān)資料,需要的朋友可以參考下
    2016-01-01

最新評(píng)論