解決微信小程序自定義navigationBar高度問題

在自定義小程序的navigationBar時,常常會遇到不一樣手機須要的navigationBar高度不一致的問題,不能寫死。要動態獲取高度。wx提供了safearea的方法,但不是很好用,在低版本蘋果機的表現很很差。因此這裏我仍是推薦使用getSystemInfoSync以及getMenuButtonBoundingClientRect方法,獲取手機頂部狀態欄高度,以及小程序右上角的菜單按鈕位置信息,綜合計算獲得html

計算方法:小程序

image.png

navigationBar的高度 = 藍色框高度 * 2 + 菜單按鈕高度markdown

推薦在小程序onLaunch函數內執行,即首次初始化的時候執行,避免重複執行,代碼以下:函數

image.png

tips: 寫樣式的時候,注意小程序的盒模型是content-box,即高度不包括padding html樣式以下:spa

image.png

相關文章
相關標籤/搜索