精確計算微信小程式scrollview高度，全機型適配

solocoder發表於2018-07-17
微信小程式View

眾所周知，可以滑動的 scroll 元件在移動端非常的重要，幾乎每個頁面都要用到。

而小程式的 scroll-view 元件就比較坑了，非得指定一個高度才能正常使用。佈局複雜的時候誰還給你算高度啊。。。

坑歸坑，沒辦法，還是得用……既然官方要求必須傳高度，那就想辦法計算吧。

一、佈局分析，推導公式

先給個示例圖：

精確計算微信小程式scrollview高度，全機型適配

這是一個稍微複雜點的頁面，最上面是兩個 tab 標籤，每個標籤的頁面是一個子元件。第二個子元件佈局是上面一個標題，下面是 scroll-view 。

再畫個解剖圖吧……

精確計算微信小程式scrollview高度，全機型適配

頁面分三部分，tab，title，scroll-view。不要忘了每個部分間還有 margin, 這裡設定的是每個 margin 都是 10px。

所以要計算 scroll-view 的高度可以得出下面 公式：

scroll-view 的高度 = 頁面可用高度 - tab高度 - title高度 - 10 - 10
複製程式碼

為什麼減兩個 10 呢？上面說了 10 是 margin 的距離，tab 與 title 有 10px 的margin，title 與 scroll-view 也有 10px 的 margin。

需要注意的是計算用的單位都是 px，不是小程式的 rpx。因為下面呼叫介面獲取可用螢幕高度時得到的就是 px 。

二、計算變數的高度

2.1 計算單個節點高度

上面的公式中的變數有：頁面可用高度, title 的高度，tab 的高度。

這裡需要計算的就是 頁面可用高度 和 title 的高度，因為為了簡單 tab 的高度是寫死的 50px, 當然不寫死也沒關係，在父元件中計算 tab 的高度傳給子元件就好。

下面正式開始計算

//計算 scroll-view 的高度
computeScrollViewHeight() {
  let that = this
  let query = wx.createSelectorQuery().in(this)
  query.select('.title').boundingClientRect(function(res) {
    //得到標題的高度
    let titleHeight = res.height
    //scroll-view的高度 = 螢幕高度- tab高(50) - 10 - 10 - titleHeight
    //獲取螢幕可用高度
    let screenHeight = wx.getSystemInfoSync().windowHeight
    //計算 scroll-view 的高度
    let scrollHeight = screenHeight - titleHeight - 70
    that.setData({
      scrollHeight: scrollHeight
    })
  }).exec()
},
複製程式碼

這裡主要是通過小程式封裝的 API 來計算的。

wx.getSystemInfoSync() 可以得到裝置的各種資訊，關於高度的引數有兩個，一個是螢幕高度 screenHeight，一個是可使用視窗高度 windowHeight。注意計算的時候要用 windowHeight，這樣算出來的高度才是對的。screenHeight是手機的螢幕高度，包含了手機的狀態列和小程式標題欄。

有了可用螢幕高度，還需要元素的高度。計算元素高度小程式也提供了 API，參見 WXML節點資訊API。

具體用法看文件就好了，精簡的使用步驟就是：

let query = wx.createSelectorQuery().in(this)
query.select('.title').boundingClientRect(function(res) {
    //在這裡做計算，res裡有需要的資料
}).exec()
複製程式碼

注意在元件 component 裡使用的話，要用 wx.createSelectorQuery().in(this) ，將選擇器的選取範圍更改為自定義元件component內。（初始時，選擇器僅選取頁面範圍的節點，不會選取任何自定義元件中的節點。）

如果想同時測量多個節點的高度呢？

2.2 計算多個節點高度

能計算單個當然也能同時計算多個。如下：

computeScrollViewHeight() {
  let that = this
  let query = wx.createSelectorQuery().in(this)
  query.select('.search').boundingClientRect()
  query.select('.title-wrapper').boundingClientRect()
  query.exec(res => {
    let searchHeight = res[0].height
    let titleHeight = res[1].height
    let windowHeight = wx.getSystemInfoSync().windowHeight
    let scrollHeight = windowHeight - searchHeight - titleHeight - 30 - 5 - 50 
    this.setData({ scrollHeight: scrollHeight})
  })
},
複製程式碼

有幾個節點就寫幾個 query.select('.search').boundingClientRect()， 然後呼叫 query.exec() 執行操作獲取節點資訊的陣列。

注意： 呼叫封裝好的 computeScrollViewHeight() 的時機是在生命週期函式的 ready() 中，不能在 created()，否則取不到資料。

參見 Component構造器

精確計算微信小程式scrollview高度，全機型適配

三、在 wxml 使用計算的結果

計算完成後如何使用呢？

<scroll-view scroll-y style='height: {{scrollHeight + "px"}}'></<scroll-view>
複製程式碼

通過上面的方法使用。
注意：一定要在變數後面加上單位 px，不加的話會出錯。

以上就是精確計算微信小程式scrollview高度的方法，從此再也不擔心 scroll-view 高度錯亂了！

相關文章