uniapp设置顶部导航栏

1. 什么是Uniapp

Uniapp，简称为Universal App，中文意思是「跨平台应用开发框架」，是基于Vue.js的全新开源框架，由流行的前端框架Vue.js驱动，支持编译到iOS、Android、H5、以及各种小程序（微信、支付宝、百度、头条、QQ、360、快手等）平台。开发者使用Uniapp可以使用Vue语法进行跨平台应用开发，无需重复开发，大大提高开发效率。

2. Uniapp设置顶部导航栏

在移动应用中，顶部导航栏是比较常见的一种交互方式。Uniapp的顶部导航栏的样式和使用方法跟Vue.js基本一致，都是通过组件的方式进行实现。Uniapp也提供了一个全局组件vue-nav-bar来快速实现顶部导航栏。

2.1 使用vue-nav-bar组件

首先安装vue-nav-bar组件，打开终端，进入项目根目录，输入以下命令：

npm i vue-nav-bar -S

然后在要使用顶部导航栏的页面中引入vue-nav-bar组件。

<template>
  <div class="nav-bar-wrap">
    <vue-nav-bar title="标题" 
                  left-text="返回" 
                  right-text="更多" 
                  @click-left="handleClickLeft"
                  @click-right="handleClickRight">
    </vue-nav-bar>
    <!-- 页面主体部分 -->
  </div>
</template>
<script>
  import uniNavBar from 'vue-nav-bar';
  export default {
    components: {
      uniNavBar
    },
    methods: {
      handleClickLeft () {
        // 左侧点击事件
      },
      handleClickRight () {
        // 右侧点击事件
      }
    }
  }
</script>

vue-nav-bar组件有以下可配置属性：

title：导航栏标题，默认值为「通用标题」

left-text：左侧文字，默认值为「返回」

right-text：右侧文字，默认值为空

@click-left：左侧点击事件，方法名自定义

@click-right：右侧点击事件，方法名自定义

2.2 自定义顶部导航栏

如果需要自定义顶部导航栏的样式，可以通过uni-app提供的全局配置来实现。

在项目根目录下的uni.scss文件中定义样式：

/* 导航栏样式 */
.uni-nav-bar {
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #F8F8F8;
  position: relative;
  z-index: $zindex-navbar;
  color: #333;
  /* 返回按钮样式 */
  .uni-nav-bar__left {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #007AFF;
    font-size: 17px;
    padding: 0 15px;
    width: auto;
  }
  /* 标题样式 */
  .uni-nav-bar__title {
    font-size: 17px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
    display: inline-block;
  }
  /* 右侧按钮样式 */
 .uni-nav-bar__right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #007AFF;
    font-size: 17px;
    padding: 0 15px;
    width: auto;
  }
}

然后在main.js文件中引入uni.scss文件：

import './uni.scss';

这样就可以在页面中自定义顶部导航栏的样式了。

2.3 改变状态栏颜色

如果需要改变状态栏的颜色，需要在manifest.json文件中进行配置。具体操作步骤如下：

在manifest.json文件中添加以下内容：

"globalStyle": {
  "statusBar": {
    "backgroundColor": "#007AFF",
    "textColor": "#ffffff",
    "displayMode": "dark"
  }
}

backgroundColor：状态栏的背景颜色；

textColor：状态栏中文字的颜色；

displayMode：状态栏文字的显示模式，可选值为「dark」或「light」，分别表示黑色或白色。

打开App.vue文件，添加以下生命周期函数：

onLaunch: function () {
  if (uni.getSystemInfoSync().platform == 'android') {
    let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    uni.setStorageSync('statusBarHeight', statusBarHeight);
  }
},
onShow: function () {
  if (uni.getSystemInfoSync().platform == 'android') {
    let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    uni.setStorageSync('statusBarHeight', statusBarHeight);
  }
}

这个生命周期函数是用来获取状态栏的高度，并保存在缓存中。由于Android和iOS的状态栏高度不同，在不同平台上需要分开处理。

以上就是Uniapp设置顶部导航栏的详细步骤。通过使用vue-nav-bar组件和全局配置，可以快速精准地实现顶部导航栏的定制化。同时，Uniapp还提供了多种方法来改变状态栏的颜色，可以满足不同场景的需求。