uni-app开发-顶部导航栏

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

uni-app是流行跨端开发框架之一，其采用Vue.js框架，开发者编写一套代码，即可发布到ios、Android、H5、微信小程序、支付宝小程序、钉钉小程序等多个平台。

本文介绍了在App或H5开发中，不同场景下的导航栏的代码实践。

场景一：去除导航栏

某些时候，为了达到美观的目的，我们需要在App某些页面中去掉顶部的导航栏，如下图中的App的登录页：

那么，在uni-app中实现去掉页面顶部导航栏，我们只需要在page.json进行简单的配置，具体是在该页配置中设置style下的navigationStyle属性值为“custom”，custom即取消默认的原生导航栏。

 {
     "pages": [
         {
             "path": "pages/user/user_login",
             "style": {
                 "navigationStyle": "custom"
             }
         },
     ]
 }

场景二：透明背景导航栏

如要实现导航栏透明效果，这里有个小小的坑，官方文档说是在style下增加transparentTitle属性，其值有三种：“always ”、“auto”、“none”，默认时“none”，其中“always”是指永久性设置导航栏为透明，而设置成“auto”的话，则默认不显示，当页面滑动时会出现，但实际实践中，“always”是完全隐藏了导航栏，而不是透明，同理auto也不是将导航栏设为透明，而是随着滑动，动态的切换隐藏状态。

真正能够实现导航栏背景透明的属性是navigationBarBackgroundColor，官方文档里写它的值类型是HexColor，但实际上可以写transparent，实现透明，如下图。

 {
     "path": "pages/draft/draft_main",
     "style": {
         "navigationBarTitleText": "待办委托单",
         "navigationBarBackgroundColor": "transparent",
     }
 },

场景二：隐藏默认返回按钮

在uni-app中，如果通过其他页面路由切换过来的页面，不是底部tabBar页面的话，默认会在导航栏的左侧，显示返回按钮。

根据业务需求，我们有时可能会去掉这个返回按钮。那么我们可以在style下，配置app-plus中“titleNView”中的“autoBackButton”属性为“false”。如果是H5的话，则需要设置CSS隐藏，或者操作Dom来实现。下面是通过在App.vue的style样式里，通过data-page设置对应页面的返回按钮隐藏。

 <style> 
  /* #ifdef H5 */
  uni-page[data-page="pages/draft/list"] .uni-page-head-hd {
     display: none;
  }
  /* #endif */
 </style>

场景四：自定义按钮

自定义按钮应用场景较多，如下图中，在导航栏右侧添加一个“+”，用于创建新数据。

创建自定义按钮，在style下面的app-plus或h5中设置titleNView的buttons属性，注意值类型是一个数组，每个数组元素即是单独的按钮属性，属性有：

属性	类型	默认值	描述
type	String	none	按钮样式
color	String	默认与标题文字颜色一致	按钮上文字颜色
background	String	默认值为灰色半透明	按钮的背景颜色，仅在标题栏type=transparent时生效
colorPressed	String	默认值为 color 属性值自动调整透明度为 0.3	按下状态按钮文字颜色
float	String	right	按钮在标题栏上的显示位置，可取值"left"、"right"
fontWeight	String	normal	按钮上文字的粗细。可取值"normal"-标准字体、"bold"-加粗字体。
fontSize	String		按钮上文字大小
fontSrc	String		按钮上文字使用的字体文件路径。不支持网络地址，请统一使用本地地址。
select	String	false	是否显示选择指示图标（向下箭头），常用于城市选择
text	String		按钮上显示的文字。使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）。
width	String	44px	按钮的宽度，可取值： "*px" - 逻辑像素值，如"10px"表示10逻辑像素值，不支持rpx。按钮的内容居中显示； "auto" - 自定计算宽度，根据内容自动调整按钮宽度

 {
     "path": "pages/task/task_main",
     "style": {
         "navigationBarTitleText": "测量任务",
         "enablePullDownRefresh": true,
         "app-plus": {
             "titleNView": {
                 "autoBackButton": false,
                 // "titleSize": "28px",
                 "buttons": [{
                     "fontSrc": "/static/font_icon/iconfont.ttf",
                     "text": "\ue614",
                     "color": "#FFFFFF",
                     "width": "auto"
                 }]
             }
         }
 ​
     }
 },

上述代码，是使用了字体图标来设置按钮，当然也可以设置成普通文本。

在页面中，在JavaScript用onNavigationBarButtonTap()方法来响应自定义按钮的单击事件。

 onNavigationBarButtonTap() {
     // 已办结任务，禁止保存
     if (this.isHistory) {
         uni.showModal({
             content: '已办结委托单，不允许操作',
             showCancel: false
         })
         return
     }
     this.show = !this.show;
 },

如果是多个按钮的话，可以在onNavigationBarButtonTap()方法中传入参数，参数的index下标根据参数返回的值来判断是哪个按钮。

 onNavigationBarButtonTap(btn) {
     console.log(btn.index);
     if (btn.index == 1) {
         console.log("第一个按钮");
     };
     if (btn.index == 0) {
         console.log("第二个按钮");
     }
 }