先在page.json中找到要自定义导航栏的页面，给"style"设置属性"navigationStyle":“custom”，设置后默认的导航栏就没有，我们就可以自定义了。
下面是我自己封装的一个导航栏，用的是uni-app。
<template> <view class="pageHead"> <view class="headContent"> <uni-icons v-if="backIcon" class="back" type="back" size="16" color="#0079FE" @click="backLastPage"></uni-icons> <text class="headTitle">{{title}}</text> </view> </view> </template> <script> export default { props:{ title:{ type:String, default: '' }, backIcon: { type: Boolean, default: true } }, data(){ return { } }, methods:{ backLastPage(){ uni.navigateBack({ delta: 1 }) } } } </script> <style lang="less" scoped> .pageHead{ height: 166rpx; text-align: center; } .headContent{ height: 84rpx; width: 100%; padding-top: 82rpx; line-height: 84rpx; font-size: 28rpx; font-weight: 700; font-style: 微软雅黑 Bold; background-color: #FFFFFF; position: fixed; top: 0; z-index: 11; color: #333333; .back{ position: absolute; text-align: left; left: 30rpx; } } </style>