# uniapp-navigation-bar

> > [lingxiaoyi/navigation-bar](https://github.com/lingxiaoyi/navigation-bar) 的 [uniapp](https://uniapp.dcloud.io/) 版本。

Latest version **0.2.1** (published 2020-05-25) · 0 weekly downloads

## Install

```sh
npm install uniapp-navigation-bar
pnpm add uniapp-navigation-bar
yarn add uniapp-navigation-bar
bun add uniapp-navigation-bar
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2020-05-25 |
| First published | 2020-05-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 89.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | auven |

## Links

- npm: https://www.npmjs.com/package/uniapp-navigation-bar
- Repository: https://github.com/auven/uniapp-navigation-bar
- Homepage: https://github.com/auven/uniapp-navigation-bar#readme
- Issues: https://github.com/auven/uniapp-navigation-bar/issues
- npm.io page: https://npm.io/package/uniapp-navigation-bar

## Dependencies (16)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [vuex](https://npm.io/package/vuex.md) ^3.2.0
- [flyio](https://npm.io/package/flyio.md) ^0.6.2
- [core-js](https://npm.io/package/core-js.md) ^3.6.4
- [@dcloudio/uni-h5](https://npm.io/package/@dcloudio/uni-h5.md) ^2.0.0-27520200518001
- [@dcloudio/uni-stat](https://npm.io/package/@dcloudio/uni-stat.md) ^2.0.0-27520200518001
- [@dcloudio/uni-mp-qq](https://npm.io/package/@dcloudio/uni-mp-qq.md) ^2.0.0-27520200518001
- [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.12.1
- [@dcloudio/uni-app-plus](https://npm.io/package/@dcloudio/uni-app-plus.md) ^2.0.0-27520200518001
- [@dcloudio/uni-mp-baidu](https://npm.io/package/@dcloudio/uni-mp-baidu.md) ^2.0.0-27520200518001
- [@dcloudio/uni-mp-alipay](https://npm.io/package/@dcloudio/uni-mp-alipay.md) ^2.0.0-27520200518001
- [@dcloudio/uni-mp-weixin](https://npm.io/package/@dcloudio/uni-mp-weixin.md) ^2.0.0-27520200518001
- [@dcloudio/uni-mp-toutiao](https://npm.io/package/@dcloudio/uni-mp-toutiao.md) ^2.0.0-27520200518001
- [@dcloudio/uni-helper-json](https://npm.io/package/@dcloudio/uni-helper-json.md) *
- [@dcloudio/uni-quickapp-native](https://npm.io/package/@dcloudio/uni-quickapp-native.md) ^2.0.0-27520200518001
- [@dcloudio/uni-quickapp-webview](https://npm.io/package/@dcloudio/uni-quickapp-webview.md) ^2.0.0-27520200518001

## Recent versions

- 0.2.1 (latest) — 2020-05-25
- 0.2.0 — 2020-05-24
- 0.1.0 — 2020-05-24

## README

# uniapp-navigation-bar

> [lingxiaoyi/navigation-bar](https://github.com/lingxiaoyi/navigation-bar) 的 [uniapp](https://uniapp.dcloud.io/) 版本。

`uniapp-navigation-bar` 是小程序的顶部导航组件，当页面配置 `navigationStyle` 设置为 `custom` 的时候可以使用此组件替代原生导航栏。

## 不同平台小程序自定义导航栏设置

### 微信小程序、头条小程序、百度小程序、QQ小程序

第一步，隐藏导航栏 `navigationStyle: custom`。

第二步，导航栏标题颜色及状态栏前景颜色 `navigationBarTextStyle: black/white` ，或者是调用 `uni.setNavigationBarColor({ frontColor: 'xxx', backgroundColor: 'xxx' })`。

**注意**
- QQ小程序 `setNavigationBarColor` 设置 `backgroundColor` 会导致状态栏有颜色，遮罩了自定义状态栏，所以需要将 `backgroundColor` 设置为 `rgba(0,0,0,0)` ，即透明颜色。当然直接配置 `navigationBarTextStyle: black/white` 是最好的。
- 头条小程序下， `setNavigationBarColor` 没办法改变胶囊的颜色。直接配置 `navigationBarTextStyle: black/white` 是可以的。
- 百度小程序由于缺少 appid ，没办法在真机跑测，目前在开发者工具发现 svg 背景图按钮没办法显示出来。

### 支付宝小程序

第一步，隐藏导航栏 `"transparentTitle": "always", "titlePenetrate": "YES"`。

第二步，导航栏标题颜色及状态栏前景颜色 `titleBarColor: '#ffffff'` 。当 `titleBarColor` 为 `#ffffff` 时，按钮是蓝色的，文字是黑色的；当 `titleBarColor` 非 `#ffffff` 时，按钮是白色的，文字是白色的。同样的也可以调用 `uni.setNavigationBarColor({ frontColor: 'xxx', backgroundColor: 'xxx' })` 进行设置。

**注意**
- 支付宝小程序是没办法去除左边返回按钮的
- 没有 `getMenuButtonBoundingClientRect` 这个方法，获取不到胶囊的位置
- `uni.hideAllFavoriteMenu()` 可以隐藏所有页面右上角的收藏按钮

## 使用说明

### 在项目中使用

#### 安装

```sh
npm i uniapp-navigation-bar -S

# 组件中使用到了 `scss` ，所以需要安装 `node-sass` 和 `sass-loader`，已安装可跳过
npm i node-sass sass-loader -D
```

#### 修改 babel.config.js

```js
...
process.UNI_LIBRARIES = process.UNI_LIBRARIES || ['@dcloudio/uni-ui']
const UNI_LIBRARIES = process.UNI_LIBRARIES // <-- 修改1
UNI_LIBRARIES.push('uniapp-navigation-bar') // <-- 修改2
UNI_LIBRARIES.forEach(libraryName => { // <-- 修改3
  plugins.push([
    'import',
    {
      'libraryName': libraryName,
      'customName': (name) => {
        return `${libraryName}/lib/${name}/${name}`
      }
    },
    libraryName // <-- 修改4
  ])
})
...
```

#### 引用

```vue
<template>
  <div>
    <navigation-bar title="自定义导航栏" ref="navBar" />
  </div>
</template>

<script>
// 方式一
import { NavigationBar } from 'uniapp-navigation-bar'
// 方式二
// import NavigationBar from 'uniapp-navigation-bar/lib/navigation-bar/navigation-bar'
export default {
  components: {
    NavigationBar
  }
}
</script>
```

### 属性列表

| 属性               | 类型         | 默认值     | 必填 | 说明                                                                                                                       |
| ------------------ | ------------ | ---------- | ---- | -------------------------------------------------------------------------------------------------------------------------- |
| ext-class          | string       |            | 否   | 添加在组件内部结构的 class，可用于修改组件内部的样式                                                                       |
| title              | string       |            | 否   | 导航标题，如果不提供，则名为 renderCenter 的 slot 有效                                                                     |
| background         | string       | #ffffff    | 否   | 导航背景色                                                                                                                 |
| backgroundColorTop | string       | background | 否   | 导航下拉背景色,默认取 background 的颜色,不理解[见 issue 问题](https://github.com/lingxiaoyi/Taro-navigation-bar/issues/15) |
| color              | string       | #000000    | 否   | 导航字体颜色                                                                                                               |
| iconTheme          | string       | black      | 否   | 主题图标和字体颜色,当背景色为深色时,可以设置'white'                                                                        |
| back               | boolean      | false      | 否   | 是否显示返回按钮，默认点击按钮会执行 @back 事件，如果为 false，则名为 left 的 slot 有效                            |
| home               | boolean      | false      | 否   | 是否显示 home 按钮，执行方法自定义,或者看例子                                                                              |
| searchBar          | boolean      | false      | 否   | 是否显示搜索框，默认点击按钮会执行 @search 事件，如果为 false，则名为 center 的 slot 有效                                |
| searchText         | string       | 点我搜索   | 否   | 搜索框文字                                                                                                                 |
| backFn             | boolean      | false     | 否   | 是否自定义返回按钮事件，即是否执行 @back 事件                    |
| autoSetNbc         | boolean      | false     | 否   | 是否根据 `iconTheme` 自动设置导航栏标题颜色及状态栏前景颜色，当为 `true` 的时候，则会调用 `setNavigationBarColor` 进行设置       |

### Slot

| 名称         | 描述                                                                  |
| ------------ | --------------------------------------------------------------------- |
| left   | 左侧 slot，在 back 按钮位置显示，当 back 为 false 的时候有效          |
| center | 标题 slot，在标题位置显示，当 searchBar 为 false title 为空的时候有效 |
| right  | 在导航的右侧显示                                                      |

### 事件

| 事件               | 说明                                                                                                                       |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| @home             | 在 home 为 true 时，点击 home 按钮触发此事件                                                                               |
| @back             | 在 back 为 true 时，点击 back 按钮触发此事件，detail 包含 delta                                                            |
| @search           | 在 searchBar 为 true 时，点击 search 按钮触发此事件                                                                        |

### iPhone 手机打电话和开热点导致导航栏样式错乱

由于 `uni-app` 组件里不支持 `onShow` 事件，所以要解决**iPhone 手机打电话和开热点导致导航栏样式错乱**的问题，需要在组件使用的页面的 `onShow` 方法里去调用 `NavBar` 组件的 `refreshSystemInfo` 方法。

pageA.vue
```vue
<template>
  <div>
    <navigation-bar ref="navBar" />
  </div>
</template>

<script>
export default {
  ...
  onShow() {
    if (this.$refs.navBar) {
      this.$refs.navBar.refreshSystemInfo && this.$refs.navBar.refreshSystemInfo()
    }
  },
  ...
}
</script>
```

---
_Source: https://npm.io/package/uniapp-navigation-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._