小程序元素如何撐滿頁面剩余部分

本人接手一個小程序，他已經把靜態頁完成了，不過可惜的，頁面的滾動機制他完全沒有考慮，所以當我開發的時候，發現滾動功能完全無法使用。

　　

他開發的時候上方是三個塊級元素，而下方的內容也是一個塊級元素。

　　現在需要將下方的內容變為滾動區域，接着我瞬間想到的是兩種辦法

　　第一種，上方的三個塊級元素全部浮動就好了，然后將整個頁面課滾動，不過因為fixed浮動在移動端的惡劣兼容性，再加上上方樣式耦合性太強，就直接pass了

 

　　第二種，使用scroll-view將下方內容包裹起來，並給scroll-view頂一個高度，那么問題來了，這個高度該怎么定義

 

　　很顯然，由於機型的改變，屏幕大小的變化，這個是個動態高度，那這個高度是怎么定義呢

 

　　這里需要使用到小程序的幾個api

　　　　wx:getSystemInfo獲取系統信息，可以獲取到當前機子的可使用窗口的高度

　　　　

　　　　wx.createSelectorQuery()：返回一個SelectorQuery對象實例，並使用boundingClientRect等方法選擇需要查詢的信息

　　　　

　　　　

let query = wx.createSelectorQuery()　　
    wx.getSystemInfo({
      success: res => {
        query.selectAll('.box-top').boundingClientRect(rect => {
          let heightAll = 0;
          rect.map((currentValue, index, arr) => {
            heightAll = heightAll + currentValue.height
          })
          this.setData({
            scrollheight: res.windowHeight - heightAll
          })
        }).exec();
      }
    })

　

<scroll-view scroll-y style="height:{{scrollheight}}px" class="recommend-container" bindscrolltolower="getmore">
<scroll-view>

 

　由此scrollheight就被計算出來了,此時scroll-view區域會撐滿頁面剩下所有高度