1、發現問題
小程序頁面自定義導航欄功能已經開放有些日子了(還不知道這個功能的可以先>>了解一下)，這極大的提升了小程序開發的自由度，相信不少小伙伴已經使用過這個功能，同時也相信不少小伙伴在此功能開發過程中踩過同樣的一些坑：
同樣的，這些問題也是小灰經歷過的。但是小灰相信，辦法總比問題多，于是開始了自己的探究：
2、一探究竟
為了搞明白到底該怎么去適配，老規矩，我先翻了一波官方文檔，還別說，官方還真有這么一段介紹了相關細節，>>詳情點擊：
從圖中分析，我們可以得到如下信息：
這。。。，好像并沒有什么L用?。?？這僅僅是普通屏幕為參照的，ipx， 安卓全面屏完全沒介紹。
沉著冷靜，我們接著分析：
那么我們來論證一下：
第一個問題：膠囊按鈕到狀態欄下邊緣的距離是不是固定的？
很簡單，我們寫一個狀態欄，通過wx.getSystemInfoSync().statusBarHeight設置高度
為了好測量，我們設置狀態欄背景色為深色
js代碼：
var sysinfo = wx.getSystemInfoSync();this.setData({ statusBarHeight:sysinfo.statusBarHeight })wxml代碼：
<view class="status-bar" style="height:{{statusBarHeight}}px"></view>wxss代碼：
.status-bar{ background: rgb(141, 71, 71); }效果圖（iPhone6）：
效果圖（iPhoneX）：
效果圖（安卓）：
是不是有點眉目了？是的，從截圖可以看出，iOS是一致的，但是Android好像有所差別。
那究竟距離是多少？我們用神器（微信截圖）來量一量：
Android：
iOS：
可以看出，iOS膠囊按鈕與狀態欄之間距離為：6px， Android為8px，并且經過測量，iOS各機型，Android各機型結果一致（由于篇幅原因，就不一一展示截圖了，有興趣的可以自行測量）
第二個問題：導航欄分為 狀態欄+標題欄？
通過對第一個問題的論證，很明顯能看出來確實是這樣的。并且通過第一個問題的測量結果以及官方提供的數據，我們可以對標題欄高度進行計算：
*注：由于膠囊按鈕是原生組件，為表現一直，其單位在個系統都為px，所以我們的自定義導航欄各個高度的單位都必需是px（切記不能用rpx），才能完美適配。
3、解決問題
通過上述分析，相信小伙伴們都能有一個解決問題的思路了，在上代碼之前，小灰再給大家畫一下重點：
話不多說，上代碼(gitHub地址)：
js：
Component({ properties: { background: { type: String, value: 'rgba(255, 255, 255, 1)' }, color: { type: String, value: 'rgba(0, 0, 0, 1)' }, titleText: { type: String, value: '導航欄' }, titleImg: { type: String, value: '' }, backIcon: { type: String, value: '' }, homeIcon: { type: String, value: '' }, fontSize: { type: Number, value: 16 }, iconHeight: { type: Number, value: 19 }, iconWidth: { type:Number, value: 58 } }, attached: function(){ var that = this; that.setNavSize(); that.setStyle(); }, data: { }, methods: { // 通過獲取系統信息計算導航欄高度 setNavSize: function() { var that = this , sysinfo = wx.getSystemInfoSync() , statusHeight = sysinfo.statusBarHeight , isiOS = sysinfo.system.indexOf('iOS') > -1 , navHeight; if (!isiOS) { navHeight = 48; } else { navHeight = 44; } that.setData({ status: statusHeight, navHeight: navHeight }) }, setStyle: function() { var that = this , containerStyle , textStyle , iconStyle; containerStyle = [ 'background:' + that.data.background ].join(';'); textStyle = [ 'color:' + that.data.color, 'font-size:' + that.data.fontSize + 'px' ].join(';'); iconStyle = [ 'width: ' + that.data.iconWidth + 'px', 'height: ' + that.data.iconHeight + 'px' ].join(';'); that.setData({ containerStyle: containerStyle, textStyle: textStyle, iconStyle: iconStyle }) }, // 返回事件 back: function(){ wx.navigateBack({ delta: 1 }) this.triggerEvent('back', {back: 1}) }, home: function() { this.triggerEvent('home', {}); } }})wxml：
<view class='nav' style='height: {{status + navHeight}}px'> <view class='status' style='height: {{status}}px;{{containerStyle}}'></view> <view class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'> <view class='back-icon' wx:if="{{backIcon}}" bindtap='back'> <image src='{{backIcon}}'></image> </view> <view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'> <image src='{{homeIcon}}'></image> </view> [鏈接描述][10] <view class='nav-icon' wx:if="{{titleImg}}"> <image src='{{titleImg}}' style='{{iconStyle}}'></image> </view> <view class='nav-title' wx:if="{{titleText && !titleImg}}"> <text style='{{textStyle}}'>{{titleText}}</text> </view> </view> </view>wxss：
.navbar{ position: relative}.back-icon, .home-icon{ width: 28px; height: 100%; position: absolute; transform: translateY(-50%); top: 50%; display: flex; }.back-icon{ left: 16px;}.home-icon{ left: 44px}.back-icon image{ width: 28px; height: 28px; margin: auto;}.home-icon image{ width: 20px; height: 20px; margin: auto;}.nav-title, .nav-icon{ position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; font-size: 0; font-weight: bold;}運行效果圖：
文字標題：
圖片標題：
4、總結
經過小灰的一番論證以及實踐經驗，最終總結出以上最終解決方案，但希望對小伙伴們有所幫助，如果小伙伴們覺得有用，記得給顆star哦 --> 點我，后續還會更新其他組件。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
