前情
公司有自己的小程序項目，因公司主要技術棧爲react，所以選擇了Taro來開發，Taro是京東出品的多端統一開發解決方案，用來開發小程序也相比用原生開發，在開發體驗上好很多，而且還能使用成熟的React技術棧。
Tab頁可視區域高度獲取原理圖解
注：當前tab頁未開啓沉浸式導航欄模式
可操作區域高度獲取方法
- 通過getSystemInfoSync接口獲取窗口高和狀態欄高度，參見文擋：Taro.getSystemInfoSync() | Taro 文檔 (jd.com)
- 通過getMenuButtonBoundingClientRect獲取膠囊的位置信息，參見文擋：Taro.getMenuButtonBoundingClientRect() | Taro 文檔 (jd.com)
關鍵代碼如下:
// 獲取窗口和狀態欄高度
const {windowHeight, statusBarHeight} = Taro.getSystemInfoSync();
// 獲取菜單按鈕（右上角膠囊按鈕）的佈局位置信息。座標信息以屏幕左上角爲原點
const menuButtonBoundingInfo = Taro.getMenuButtonBoundingClientRect();
// 可操作區域的高等於窗口高 - 頂部導航的高 - 狀態欄的高
// 頂部導航的高 = 膠囊的高 + 膠囊上間隙 + 膠囊下間隙
const clientHeihgt = windowHeight - statusBarHeight - (menuButtonBoundingInfo.top - menuButtonBoundingInfo.bottom) - (menuButtonBoundingInfo.top - systemInfo.statusBarHeight) * 2;