uniapp 自定义 navigationBar

UniApp 是一款基于 Vue.js 的跨平台应用开发框架，它支持快速构建原生应用，包括 iOS、Android 和 Web 端。关于 UniApp 自定义 `navigationBar`，这是一个允许开发者自定义 App 标题栏外观和交互的功能。

要在 UniApp 中自定义 `navigationBar`，你可以按照以下步骤操作：

1. **引入组件库**：首先，在项目的 `uni-app.json` 文件的 `frameworks` 部分，启用 `custom-tab-bar` 组件库，以便使用自定义导航栏功能。

{
  "frameworks": {
    ...,
    "custom-tab-bar": {
      "version": "^1.0.0"
    }
  },
  ...
}

2. **创建样式**：在 `pages` 目录下的对应页面文件（如 `index.vue`），导入 `CustomTabBar` 组件，并编写样式覆盖默认的 `navigationBar` 样式。

<template>
  <view>
    <custom-tab-bar :style="{ color: '#fff', backgroundColor: '#3f51b5' }">
      <!-- tabbar 的配置项 -->
    </custom-tab-bar>
    ...
  </view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue'

export default {
  components: {
    CustomTabBar
  }
}
</script>

3. **设置内容**：在 `custom-tab-bar` 组件中，可以添加各个 tab 的标签以及对应的页面路径，通过 `navigator` 属性定义导航逻辑。

<custom-tab-bar :navigator="tabNavigator" />
...
data() {
  return {
    tabNavigator: [
      { text: '首页', pagePath: '/pages/home/index.vue' },
      { text: '发现', pagePath: '/pages/discover/index.vue' },
      // 更多选项...
    ]
  }
}

4. **响应事件**：如果你想给导航栏按钮添加点击事件，可以在 `CustomTabBar` 组件内监听 `tab-item-click` 事件。

<custom-tab-bar @tab-item-click="handleItemClick" />
...
methods: {
  handleClick(item) {
    console.log('点击了', item.text);
  }
}