第一次开发小程序，产品提出要求导航栏字体样式，然后系统的未提供修改的接口。
那么只能自定义导航栏才行呀。
迅速的自定义了一个导航栏
app.json中添加
"navigationStyle": "custom"
创建一个component
wxml

view class='status-bar'    view class='goBack' bindtap='goBack' style="padding-top:{{bar_Height}}px;"  hidden='{{show_bol}}'    !-- /*返回按钮*/ --      image src='../../../images/nav.png'/image    /view    view class="{{my_class ? 'tabar2':'tabar'}}" style="padding-top:{{bar_Height}}px;"      text class="red"{{title}}/text    /view    view class="{{line_h ? 'line-h-no':'line-h'}}" /view  /view

js

// pages/component/navbar/index.jsconst app = getApp()Component({  /**   * 组件的属性列表   */  properties: {    title: {// 设置标题      type: String,      value: ''    },    show_bol: {// 控制返回箭头是否显示      type: Boolean,      value: false    },    my_class: {// 控制样式      type: Boolean,      value: false    },    line_h: {// 控制样式      type: Boolean,      value: false    }  },  /**   * 组件的初始数据   */  data: {    type: "组件",    bar_Height: wx.getSystemInfoSync().statusBarHeight  },  /**   * 组件的方法列表   */  methods: {    goBack: function () {// 返回事件      console.log("退后")      wx.navigateBack({        delta: 1,      })    }  }})

wxss/

/* pages/component/navbar/index.wxss */.status-bar {  width: 100%;  z-index: 99999;  position: fixed;  top: 0;}.goBack{  position: absolute;  top: 15rpx;  font-size:12pt;}.goBack image{  width: 21rpx;  height: 40rpx;  padding: 12rpx 20px 0 30rpx;}.tabar {  display: flex;  justify-content: center;  background-color: #fff;}.tabar2{  /* background: transparent !important; */  display: flex;  justify-content: center;  background-color: #4884EE;}.tabar2 text{  /* color: #fff !important;  font-weight: lighter !important; */  padding: 20rpx 30rpx;  color: #fff;  font-size: 34rpx;  font-weight: bold;}.tabar text {  padding: 20rpx 30rpx;  color: #131A32;  font-size: 34rpx;  font-weight: bold;}.line-h {  width: 100%;  height: 1rpx;  background-color: #F5F5F5;}.line-h-no {  width: 100%;  height: 0rpx;  background-color: #F5F5F5;}

page中的wxml中引入
当然不要忘记json中引入组件哦。

view class='box-detail' style="padding-top:{{widnowH =568 ?bar_Height + 40:bar_Height + 45}}px;"  nav-bar title='大鱼' show_bol='{{true}}' my_class='true' line_h='true'/nav-bar/view...

以上，自定义导航已经完美解决了。
但是。。。开发列表页面时，做下拉刷新的时候发现被导航栏覆盖，而且页面回弹有误。
一番百度，发现了两篇好文章。
小程序自定义导航栏后下拉刷新思考
微信小程序-自定义下拉刷新

了解到。微信小程序的一些小瑕疵。
1.自定义导航+自定义下拉刷新
2.系统导航+自定义下拉刷新/系统下拉刷新
只能有这两种模式。所以，开发小程序的小伙伴，如果选择自定义导航的话，就需要自定义下拉刷新，并且要注意andriod和iOS的适配问题哦。。。