本文實(shí)例講述了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)獲取元素寬高的方法。分享給大家供大家參考,具體如下:
在清澗等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需制作網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),全網(wǎng)營銷推廣,外貿(mào)網(wǎng)站建設(shè),清澗網(wǎng)站建設(shè)費(fèi)用合理。
我以前一直以為微信小程序不能動(dòng)態(tài)獲取view元素的寬高。但是自從看到: wx.createSelectorQuery()
這個(gè)api接口,以前的某些問題就能得到解決了。。。
那么,這個(gè)api接口怎么用呢?
首先,這個(gè)接口會(huì)返回一個(gè)對(duì)象實(shí)例。
var obj=wx.createSelectorQuery();
下面的就是返回的對(duì)象實(shí)例 obj 的所有內(nèi)容。
返回的 obj 有五個(gè)方法:
1. obj.in(component):沒用過這個(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():我沒用過這個(gè)方法。官方說是選擇顯示區(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)看官方文檔的說明。
廢話了這么多,真正的實(shí)例用法:
wx.createSelectorQuery().selectAll('.npl-intro').boundingClientRect(function (rect) { console.log(rect[0].height) console.log(rect[0].width) }).exec()
如果覺得這樣寫有點(diǎn)長??梢苑植綄?。也是一樣的結(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)問題。結(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)用。
注意:如果要獲取通過
wx:if
和setData
來實(shí)現(xiàn)顯示與隱藏的元素,調(diào)用的這個(gè)方法的時(shí)候可能出現(xiàn)獲取到的內(nèi)容為null。我的解決辦法是加個(gè)定時(shí)器:因?yàn)檫@個(gè)獲取元素的方法是異步的,所以只有拖延點(diǎn)時(shí)間再去獲取,不然有可能元素還未加載出來,就調(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ì)大家微信小程序開發(fā)有所幫助。
文章標(biāo)題:微信小程序?qū)崿F(xiàn)動(dòng)態(tài)獲取元素寬高的方法分析
當(dāng)前地址:http://muchs.cn/article42/picghc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、定制網(wǎng)站、企業(yè)建站、網(wǎng)站策劃、域名注冊(cè)、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)