一、什么是导航栏
上面两幅图片，就是我们所说的导航栏。
上面带有时间日期的一块叫状态栏，下面带有标题文字的叫标题栏。
标题栏又可以分为左侧部分（箭头），中间部分（标题），右侧部分（按钮）。
二、创建nav-bar组件
接着我们需要建立组件。 uniapp框架，创建components目录，在目录下创建“文件名/文件名.vue”，框架会自动创建一个以文件名作为标签的组件。我们创建一个名为nav-bar的组件。
三、创建组件
状态栏，通过uni.getSystemInfoSync()api获取，在应用生命周期onLaunch内将系统信息存入全局，组件内获取状态栏高度进行渲染。
标题栏自定义，左右两部分使用具名slot插槽进行自定义。 中间文字，通过父组件向子组件传值，显示标题。
<template>
<view>
<view class="navBar" :style="{backgroundColor:bgColor}">
<!-- 状态栏 -->
<view class="status" :style="{height:statusHeight+'px'}"></view>
<!-- 标题栏 -->
<view class="title-bar" :style="{heihgt:titleHeight+'px',lineHeight:titleHeight+'px'}">
<!-- 左侧部分 -->
<view class="left">
<slot name="left-holder"></slot>
</view>
<!-- 中间部分 -->
<view class="">{{title}}</view>
<!-- 右侧部分 -->
<view class="right">
<slot name="right-holder"></slot>
</view>
</view>
</view>
<!-- 占位盒子 -->
<view class="" v-if="holderFlag" :style="{height:(statusHeight+titleHeight)+'px'}"></view>
</view>
</template>
四、组件的使用
在需要使用的位置使用nav-bar标签，在标签中键入左右样式内容。
<nav-bar>
<!-- 左侧部分导航 -->
<template v-slot:left-holder>
<view class="nav">
<view :class="navCurrent==1?'nav-selected':'nav-select'" @click="chooseNav(1)">推荐</view>
<view :class="navCurrent==2?'nav-selected':'nav-select'" @click="chooseNav(2)">关注</view>
</view>
</template>
<!-- 中间部分标题 -->
<view>{{title}}</view>
<!-- 右侧部分功能按钮 -->
<template v-slot:right-holder>
<view class="nav-icon">
<image class="icon marrig20" src="@/static/search-icon.png" mode=""></image>
<image class="icon" src="@/static/play-icon.png"></image>
</view>
</template>
</nav-bar>
总结
此时，我们就结束了我们导航栏的自定义，我会将我的代码放入git仓库，大家需要可以下载学习。
