小程序实现自定义导航栏适配完美版

来源：宝玛科技网

导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 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;
}

运行效果图：

文字标题：

图片标题：

4、总结

经过小灰的一番论证以及实践经验，最终总结出以上最终解决方案，但希望对小伙伴们有所帮助，如果小伙伴们觉得有用，记得给颗star哦 --> 点我，后续还会更新其他组件。

显示全文

全部频道

小程序实现自定义导航栏适配完美版