Uniapp顶部导航栏自定义代码

Uniapp顶部导航栏可以通过修改`pages.json`和页面的`vue`文件来进行自定义。

首先，在`pages.json`中添加`navigationBarTextStyle`和`navigationBarBackgroundColor`字段来设置导航栏文本颜色和背景颜色，例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarTextStyle": "black",
        "navigationBarBackgroundColor": "#ffffff"
      }
    }
  ]
}

然后，在页面的`vue`文件中，可以使用`uni.setNavigationBarTitle`方法来设置导航栏标题，例如：

<template>
  <view>
    <!-- 导航栏标题 -->
    <view class="nav-bar">
      <view class="nav-title">首页</view>
    </view>
  </view>
</template>

<script>
  export default {
    onReady() {
      uni.setNavigationBarTitle({
        title: '首页'
      })
    }
  }
</script>

<style>
  .nav-bar {
    height: 44px;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .nav-title {
    font-size: 18px;
    color: #333333;
  }
</style>

在`onReady`生命周期钩子中，调用`uni.setNavigationBarTitle`方法来设置导航栏标题。同时，还可以自定义导航栏的样式和布局。