微信小程式 scroll-view 填滿剩餘可用高度
阿新 • • 發佈：2018-12-23
發表於 2018-08-10 | 更新於 2018-08-15 | 分類於 專案記錄 ， 小程式
根據微信小程式 scroll-view 文件所述，scroll-view必須給定一個固定高度。那麼如果我們想要讓它自動填充剩餘高度，該怎麼辦呢？
前言
在說出我的解決方案之前，先來看一下我的頁面設計，以便於理解。
如圖所示，我將這個頁面分成了三部分：最頂部的導航欄navbar，用於顯示概要資訊的header，以及本文的主角scroll-view。可見，scroll-view位於頁面的最下方，如果我直接給它設定一個固定的高度，那麼在不同尺寸的螢幕上，就可能會有高度過小而在下方留白，或者高度過大超出螢幕下邊界的可能。那麼，自動計算scroll-view
思路有了，接下來就開始挑趁手的工具吧！
需要的 API
首先，在計算過程中，整個頁面的高度是必須要有的。而小程式的 wx.getSystemInfo API 正好可以提供這樣的功能。
其次，我們還得想辦法拿到scroll-view上面各個元件的高度。小程式雖然沒有 DOM 操作，但也提供 WXML 節點資訊的 API。
擼起袖子開始幹
既然工具有了，那麼，talk is cheap, I’ll show you the code!
當然，簡潔起見，我只會寫出相關的程式碼，其餘的程式碼我將直接略掉。
複製
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
Page({
data: {
// 頁面總高度將會放在這裡
windowHeight: 0,
// navbar的高度
navbarHeight: 0,
// header的高度
headerHeight: 0,
// scroll-view的高度
scrollViewHeight: 0
},
onLoad: function(option) {
// 先取出頁面高度 windowHeight
wx.getSystemInfo({
success: function(res) {
that.setData({
windowHeight: res.windowHeight
});
}
});
// 然後取出navbar和header的高度
// 根據文件，先建立一個SelectorQuery物件例項
let query = wx.createSelectorQuery().in(this);
// 然後逐個取出navbar和header的節點資訊
// 選擇器的語法與jQuery語法相同
query.select('#navbar').boundingClientRect();
query.select('#header').boundingClientRect();
// 執行上面所指定的請求，結果會按照順序存放於一個數組中，在callback的第一個引數中返回
query.exec((res) => {
// 分別取出navbar和header的高度
let navbarHeight = res[0].height;
let headerHeight = res[1].height;
// 然後就是做個減法
let scrollViewHeight = this.data.windowHeight - navbarHeight - headerHeight;
// 算出來之後存到data物件裡面
this.setData({
scrollViewHeight: scrollViewHeight
});
});
}
})
|
至於 WXML 裡面，就還是使用雙大括號來將data部分的scrollViewHeight的值繫結到height屬性上面就是了。
需要注意的是，上面計算出來的值，單位是px而不是rpx。
複製
1 2 3 |
<scroll-view style="height: {{scrollViewHeight}}px" scroll-y="true">
<!-- scroll-view裡面的內容 -->
</scroll-view>
|
這樣，我們就得到了一個可以自動填滿螢幕最下方剩餘空間的scroll-view啦～