在项目开发中, 想要自定义一个导航栏, 做完之后发现坑还是不少

需求: 导航栏添加搜索框与搜索图标

pages.json配置文档

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。代码:

简单的原生导航

{
      "path": "pages/search/search",
      "style": {
        "navigationBarTitleText": "搜索",
        "navigationBarBackgroundColor": "#ffd655"
      }
    }

效果

添加搜索框以及图标

{
      "path": "pages/searchpage/searchpage",
      "style": {
        "navigationBarTitleText": "搜索结果",
        "app-plus": {  //app-plus 配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持
          "titleNView": {
            // "type": "transparent", //透明渐变导航栏 App-nvue 2.4.4+ 支持
            "searchInput": {
              "backgroundColor": "#fff",
              "borderRadius": "6px", //输入框圆角
              "placeholder": "请输入搜索内容"
            },
            "buttons": [{  // 具体说明请继续往下看
              "text": "\ue607",  // button字体图标
              "fontSrc": "/static/iconfont.ttf",
              "fontSize": "22px",
              "float": "right"  // button位置, 可以选择在左边或者右边
            }]
          }
        }
      }
    }