小程序?qū)崿F(xiàn)自定義導(dǎo)航欄適配完美版

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 21:59:14

小程序?qū)崿F(xiàn)自定義導(dǎo)航欄適配完美版

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

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

導(dǎo)航欄高度 = 膠囊按鈕高度 + 狀態(tài)欄到膠囊按鈕間距 * 2

Android導(dǎo)航欄高度 = 32px + 8px * 2 = 48px

iOS導(dǎo)航欄高度 = 32px + 6px * 2 = 44px

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

3、解決問題

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

寫自定義導(dǎo)航組件的時候，需要將組件結(jié)構(gòu)一分為二：狀態(tài)欄 + 標(biāo)題欄

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

標(biāo)題欄高度：安卓：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: '導(dǎo)航欄' 
 }, 
 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: { 
// 通過獲取系統(tǒng)信息計算導(dǎo)航欄高度 
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;
}

運(yùn)行效果圖：