微信小程序 獲取元素高度(獲取元素節(jié)點信息)

微信小程序開發(fā)中想要如h5一樣獲取元素的寬高值進行業(yè)務的功能實現(xiàn),一開始不知道怎么實現(xiàn)踩萎,翻看文檔發(fā)現(xiàn),微信官方提供了一個非常好的東西

SelectorQuery wx.createSelectorQuery()

示例代碼

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id節(jié)點的上邊界坐標
  res[1].scrollTop // 顯示區(qū)域的豎直滾動位置
})

1.如果高度要px單位的話:

let query = wx.createSelectorQuery();
query.select('.content').boundingClientRect(rect=>{
  let height = rect.height;
  console.log(height);
}).exec();

2.如果高度要rpx單位的話尿瞭,那么可以用寬高比換算獲得:(以下的750是該元素的寬度乾蛤,單位是rpx的)

let query = wx.createSelectorQuery();
query.select('.content').boundingClientRect(rect=>{
  let clientHeight = rect.height;
  let clientWidth = rect.width;
  let ratio = 750 / clientWidth;
  let height = clientHeight * ratio;
  console.log(height);
}).exec();

3.在頁面渲染完成OnReady回調(diào) 獲取元素高度時,如果不加定時器日缨,獲取的元素的高度還是沒渲染完異步數(shù)據(jù)前的高度钱反。故需要加定時器

onReady () {
    setTimeout(() => {
    let query = wx.createSelectorQuery();
    query.select('.content').boundingClientRect(rect=>{
        let height = rect.height;
        console.log(height);
        }).exec();
    }, 300)
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市殿遂,隨后出現(xiàn)的幾起案子诈铛,更是在濱河造成了極大的恐慌,老刑警劉巖墨礁,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件幢竹,死亡現(xiàn)場離奇詭異,居然都是意外死亡恩静,警方通過查閱死者的電腦和手機焕毫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來驶乾,“玉大人邑飒,你說我怎么就攤上這事〖独郑” “怎么了疙咸?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長风科。 經(jīng)常有香客問我撒轮,道長乞旦,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任题山,我火速辦了婚禮兰粉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘顶瞳。我一直安慰自己玖姑,他們只是感情好,可當我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布慨菱。 她就那樣靜靜地躺著焰络,像睡著了一般。 火紅的嫁衣襯著肌膚如雪抡柿。 梳的紋絲不亂的頭發(fā)上舔琅,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天,我揣著相機與錄音洲劣,去河邊找鬼备蚓。 笑死,一個胖子當著我的面吹牛囱稽,可吹牛的內(nèi)容都是我干的郊尝。 我是一名探鬼主播,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼战惊,長吁一口氣:“原來是場噩夢啊……” “哼流昏!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起吞获,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤况凉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后各拷,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體刁绒,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年烤黍,在試婚紗的時候發(fā)現(xiàn)自己被綠了知市。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡速蕊,死狀恐怖嫂丙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情规哲,我是刑警寧澤跟啤,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響隅肥,放射性物質(zhì)發(fā)生泄漏关顷。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一武福、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧痘番,春花似錦捉片、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至昂芜,卻和暖如春莹规,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背泌神。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工良漱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人欢际。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓母市,卻偏偏與公主長得像,于是被迫代替她去往敵國和親损趋。 傳聞我的和親對象是個殘疾皇子患久,可洞房花燭夜當晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 序言 原本題目寫的時候?qū)崙?zhàn)經(jīng)驗,但是覺著算不上什么經(jīng)驗浑槽,就改成學習筆記了?? 注冊小程序賬號 開發(fā)和發(fā)布流程 小范圍...
    RRRookieG閱讀 2,277評論 0 3
  • 超榮幸能夠參與我司【更美小程序】的搭建蒋失,在此分享些心得希望能夠幫助到像我一樣的前端界萌新。因【更美小程序】源碼需保...
    呆戀小喵閱讀 1,145評論 0 8
  • 每天的學習記錄桐玻,可能有的地方寫的不對篙挽,因為剛學,以后發(fā)現(xiàn)錯的話會回來改掉整體流程 https://develope...
    有點健忘閱讀 4,692評論 0 7
  • 也許是從小身邊環(huán)境的原因畸冲,中學時的未來規(guī)劃就是成為一名技術(shù)工作者嫉髓,大學畢業(yè)后如愿成為一名IT工程師,只是工作幾年后...
    老猿漫說閱讀 263評論 0 1
  • 感恩堅持早起拜懺110個邑闲,感恩女兒陪同拜了49個算行,背誦弟子規(guī) 讀誦孝經(jīng),早上活動后女兒吃飯比以前多了苫耸,希望她能繼續(xù)...
    一真一切真閱讀 126評論 0 0