小程序實現自定義導航欄適配完美版

來源：懂視網責編：小采時間：2020-11-27 21:59:14

小程序實現自定義導航欄適配完美版

小程序實現自定義導航欄適配完美版:1、發現問題小程序頁面自定義導航欄功能已經開放有些日子了(還不知道這個功能的可以先>>了解一下)，這極大的提升了小程序開發的自由度，相信不少小伙伴已經使用過這個功能，同時也相信不少小伙伴在此功能開發過程中踩過同樣的一些坑：機型多如牛毛：

推薦度：

點擊下載本文 文檔為doc格式

導讀小程序實現自定義導航欄適配完美版:1、發現問題小程序頁面自定義導航欄功能已經開放有些日子了(還不知道這個功能的可以先>>了解一下)，這極大的提升了小程序開發的自由度，相信不少小伙伴已經使用過這個功能，同時也相信不少小伙伴在此功能開發過程中踩過同樣的一些坑：機型多如牛毛：

導航欄高度 = 膠囊按鈕高度 + 狀態欄到膠囊按鈕間距 * 2

Android導航欄高度 = 32px + 8px * 2 = 48px

iOS導航欄高度 = 32px + 6px * 2 = 44px

*注：由于膠囊按鈕是原生組件，為表現一直，其單位在個系統都為px，所以我們的自定義導航欄各個高度的單位都必需是px（切記不能用rpx），才能完美適配。

3、解決問題

通過上述分析，相信小伙伴們都能有一個解決問題的思路了，在上代碼之前，小灰再給大家畫一下重點：

寫自定義導航組件的時候，需要將組件結構一分為二：狀態欄 + 標題欄

狀態欄高度可通過wx.getSystemInfoSync().statusBarHeight獲取

標題欄高度：安卓：48px，iOS：44px

單位必需跟膠囊按鈕一致，用px

話不多說，上代碼(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;
}

運行效果圖：