uniapp导航栏自定义配置|仿京东、淘宝、微信顶部条

基于UniApp实现的仿微信顶部导航栏|uni-app原生导航栏自定义配置
实现了支持背景色渐变/标题居左/居中、搜索条、红点提示、按钮可自定义文字/iconfont图标/图片

对于一些不是很复杂的顶部导航，当然使用原生导航栏实现是最佳选择
uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，不过目前暂支持H5、App端，不支持小程序。
dcloud平台app-plus配置

在项目page.json里面配置app-plus

{
    "path": "pages/ucenter/index",
    "style": {
 "navigationBarTitleText": "我的",
 "app-plus": {
     "titleNView": {
  "buttons": [
      {
   "text": "ue670",
   "fontSrc": "/static/iconfont.ttf",
   "fontSize": "22px",
   "float": "left"
      },
      {
   "text": "ue62c",
   "fontSrc": "/static/iconfont.ttf",
   "fontSize": "22px"
 
      }
  ],
  "searchInput":{
      ...
  }
     }
 }
    }
},

那么如何监听按钮、输入框事件？ uni-app给出了相应API，只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged，写在相应的页面中即可。

如何实现像淘宝、微信顶部导航栏，支持背景渐变、标题居左、居中、搜索条、按钮自定义。。。
将navigationStyle设为custom或titleNView设为false时，原生导航栏不显示，这时就能自定义导航栏
"globalStyle": { "navigationStyle": "custom" }

需在App.vue里面重新对顶部状态栏进行高度处理

onLaunch: function() {
    uni.getSystemInfo({
 success:function(e){
     Vue.prototype.statusBar = e.statusBarHeight
     // #ifndef MP
     if(e.platform == 'android') {
  Vue.prototype.customBar = e.statusBarHeight + 50
     }else {
  Vue.prototype.customBar = e.statusBarHeight + 45
     }
     // #endif
     
     // #ifdef MP-WEIXIN
     let custom = wx.getMenuButtonBoundingClientRect()
     Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
     // #endif
     
     // #ifdef MP-ALIPAY
     Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
     // #endif
 }
    })
},