1. 先去掉原生的导航栏：
a:如果你要所有页面都不要原生的导航栏，就改app.json
b:如果你要某个页面自定义导航栏就改这个页面自己的json文件
只需要加一个属性就好："navigationStyle":"custom",
"navigationStyle": "custom",
2. 创建自定义组件
下面是每个文件的代码：
js文件
const app = getApp()Component({properties: {// defaultData（父页面传递的数据-就是引用组件的页面）defaultData: {type: Object,value: {title: "我是默认标题"},observer: function (newVal, oldVal) { }}},data: {navBarHeight: app.globalData.navBarHeight,menuRight: app.globalData.menuRight,menuBotton: app.globalData.menuBotton,menuHeight: app.globalData.menuHeight,menuTop: app.globalData.menuTop},attached: function () { },methods: {}})
wxml文件
<!-- 自定义顶部栏 --><view class="nav-bar" style="height:{{navBarHeight}}px;"><view style="height:{{menuHeight}}px;margin-top:{{menuTop}}px;margin-left:{{menuRight}}px;" class="nav-bar-content"><van-icon name="scan" size="32px" class="icon" bindtap="goScan"></van-icon><text style="line-height: {{menuHeight}}px;">冀为物联</text></view></view><!-- 内容区域：自定义顶部栏用的fixed定位，会遮盖到下面内容，注意设置好间距--><view class="content" style="margin-top:{{navBarHeight}}px;"></view>
wxss文件
.nav-bar {position: fixed;width: 100%;top: 0;}.nav-bar-content {width: 100%;text-align: center;position: relative;font-size: 28rpx;align-items: center;}.icon {position: absolute;left: 0;}
json文件
{"component": true}
3，因为自定义组件中有些数据是用的全局的数据 app.globaldata 所以需要在app.js中写点东西
// app.jsApp({onLaunch: function () {// console.log('app onlaunch')}});App({onLaunch: function (options) {const that = this;// 获取系统信息const systemInfo = wx.getSystemInfoSync();// 胶囊按钮位置信息const menuButtonInfo = wx.getMenuButtonBoundingClientRect();// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;that.globalData.menuHeight = menuButtonInfo.height;that.globalData.statusBarHeight = systemInfo.statusBarHeight;that.globalData.menuTop = menuButtonInfo.top;},// 数据都是根据当前机型进行计算，这样的方式兼容大部分机器globalData: {navBarHeight: 0, // 导航栏高度menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）statusBarHeight: 0,menuTop: 0,}})
4，现在组件基本上ok了，样式和数据都拿到了，就剩下在页面中引用了
a:页面的json
{"usingComponents": {"navigation-bar": "/components/navigation-bar/navigation-bar"},"navigationStyle": "custom","enablePullDownRefresh": true}
b:页面的wxml
<navigation-bar default-data="{{defaultData}}"></navigation-bar>
其他不用改了，齐活
上效果图
