微信小程序——獲取元素的寬高等屬性

微信小程序裏面沒法像用jquery同樣獲取到元素的節點。小程序提供了一個wx.createSelectorQuery()來獲取元素的相關信息。官方的文檔對於它的用法都已經寫的很詳細了。

我直接上在項目中使用的代碼吧~

先交待一下個人項目需求，看下圖：

 

獲取那塊高度的原理很簡單，就是頁面的總體高度減去1，2，3的高度。

 

看下頁面結構：

js具體代碼以下：

Page({ /** * 頁面的初始數據 */ data: { tabContHeight:300, }, //計算高度
  getRect: function () { var _this = this;
　　//我這裏須要獲取多個元素的高度，因此用的是selectAll wx.createSelectorQuery().selectAll('.page-content, .video-box, .play-note, .tab-nav').boundingClientRect().exec(function(res){ _this.setData({ tabContHeight: res[0][0].height - res[0][1].height - res[0][2].height - res[0][3].height }) }) }, /** * 生命週期函數--監聽頁面初次渲染完成 */ onReady: function () { //調用 計算高度 的方法
    this.getRect(); } })

 

注意：須要把page和.page-content的height設置爲100%，這樣你返回的.page-content的高度纔是你頁面的整個高度。

咱們要怎麼獲取其它的元素屬性呢？咱們能夠先看一下js裏面的res返回了一些什麼數據，以下圖所示：

因此若是咱們要獲取第2個元素的width,就經過 res[0][1].width就能獲得啦~~