uni-app配置pages.json中原生导航栏

官方Api

//未配置
{
    "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首页"
        }
}, 

这里介绍我在我项目中的应用------顶部导航栏（不用考虑在移动端状态栏的距离）

如图(图中为webapp页面)：

image.png

**其中的属于都是常用的属性，个别的就不一一介绍了，去官网文档有详细的介绍**
{
            "path": "pages/index/index",
            "style": {
                "app-plus":{
                    "scrollIndicator":"none",//去除滚动条
                    "titleNView":{//导航栏
                        "backgroundColor":"#1375FF",//导航栏的背景色
                        "searchInput":{//中间的搜索框
                            "align":"left",//placeholder对齐方式
                            "borderRadius":"30px",
                            "placeholder":"请输入关键词搜素",
                            "placeholderColor":"#BEBFC2",
                            "backgroundColor":"#fff",
                            "disabled":true//布尔值，是否输入
                        },
//重点说明:在iconfont中下载你所需要的图标，解压后把iconfont.ttf字体文件拷贝在static目录下，fontSrc需要引入。
                        "buttons":[//配置两边的按钮
                            {
                                "color":"#fff",
                                "float":"left",
                                "fontSize":"22px",
                                "fontSrc":"/static/font/icon.ttf",
                                "text":"\ue71d"//按钮上显示的文字。使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）。
                            },
                            {
                                "color":"#fff",
                                "float":"right",
                                "fontSize":"22px",
                                "fontSrc":"/static/font/icon.ttf",
                                "text":"\ue670"
                            }
                        ]
                    }
                }
            }
        },

1.onNavigationBarButtonTap 监听原生标题栏按钮点击事件，参数为Object
2.onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件
3.onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件