uni-app自定义导航栏按钮

1.支持H5、App端(在page.json里配置app-plus)

监听按钮、输入框事件，把onNavigationBarButtonTap和onNavigationBarSearchInputChanged写在响应的页面中。

{
 "path": "pages/search/search",
 "style": {
	"navigationBarTitleText": "",
	"app-plus": {
	   "titleNView": {
			"buttons": [
				{
				    "text": "搜索",
				    "fontSize": "16px",
				    "float": "left"
			    },
			]
		}
	 }
 }
},

2.想要自定义适配多端（包括小程序）的导航栏，可以考虑隐藏原生的，自己定义一个。
首先将原生导航栏隐藏掉

"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
        }
    })
},

    
    
    查询

3.已经封装好的组件

参考网址：https://www.cnblogs.com/xiaoyan2017/p/11531238.html

/**
　*　isBack              是否返回按钮
　*　title               标题
　*　titleTintColor      标题颜色
　*　bgColor             背景
　*　center              标题居中
　*　search              搜索条
　*　searchRadius        圆形搜索条
　*　fixed               是否固定
*/