# navigationBarSwitch

**Repository Path**: chinasoft_ohos/navigation-bar-switch

## Basic Information

- **Project Name**: navigationBarSwitch
- **Description**: 自定义封装底部TAB导航栏，支持显示红点和数字提醒。
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-09-03
- **Last Updated**: 2021-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# navigationBarSwitch

##### 简介：

使用鸿蒙Js组件开发自定义封装底部TAB导航栏，支持显示红点和数字提醒。

##### 项目结构：

![image-20210903115022217](https://i.loli.net/2021/09/03/hNkVJx2K1zgEUXL.png)

##### 效果展示：

![b6a1d0af-ec4e-452e-d986-f111bc3efd02](https://i.loli.net/2021/09/03/l24PKoWAhvects1.gif)

##### 使用示例：

1.下载组件代码到本地, 添加到你的项目中

2.通过element引入tabNavigationBar组件

```hml
<!-- 引入子组件 -->
<element src="../../common/tabNavigationBar/tabNavigationBar.hml"></element>

<div class="container">
    <swiper id="swiper" loop="false" onchange="change">
        <div class="tab-content">
            <text class="tab-content-text">首页</text>
        </div>
        <div class="tab-content">
            <text class="tab-content-text">视频</text>
        </div>
        <div class="tab-content">
            <text class="tab-content-text">消息</text>
        </div>
        <div class="tab-content">
            <text class="tab-content-text">我的</text>
        </div>
    </swiper>

    <!-- 子组件示例 -->
    <tabnavigationbar class="container-tab" tab-list="{{ tabList }}" tab-page="{{ tabPage }}" @item-click="itemClick">
    </tabnavigationbar>
</div>
```

##### 参数说明：

|     参数     | 默认值  |     类型      | 是否必填 |          说明           |
| :----------: | :-----: | :-----------: | :------: | :---------------------: |
|   tab-list   |    -    | TabListConfig |    是    | 设置底部tab相关配置属性 |
|   tab-page   |    0    |    number     |    是    |    监听page滑动索引     |
| select-color | #FF0000 |    string     |    否    |  设置tab内选中文字颜色  |
|   no-color   | #000000 |    string     |    否    | 设置tab内未选中文字颜色 |

表1 TabListConfig

|  参数   | 默认值 |    类型    | 是否必填 |     说明     |
| :-----: | :----: | :--------: | :------: | :----------: |
|  icon   |   -    | IconConfig |    是    | tab显示图片  |
|  title  |   -    |   string   |    否    |   tab名称    |
| isBadge |   -    |  boolean   |    是    | 是否显示标记 |
| msgNum  |   -    |   number   |    是    |    消息数    |
|  isSel  |   -    |  boolean   |    是    |   是否选中   |

表2 IconConfig

|  参数   | 默认值 |  类型  | 是否必填 |     说明     |
| :-----: | :----: | :----: | :------: | :----------: |
| noIcon  |   -    | string |    是    | 未选中时图片 |
| yesIcon |   -    | string |    是    |  选中时图片  |

示例：

```json
tabList: [
    {
        "icon": {
            "noIcon": "common/images/home.png", // 未选择图片
            "yesIcon": "common/images/home_on.png" // 选中图片
        },
        "title": "首页", // tab名称
        "isBadge": false, // 是否显示标记
        "msgNum": 3, // 消息数
        "isSel": true // 是否选中
    },
    {
        "icon": {
            "noIcon": "common/images/video.png",
            "yesIcon": "common/images/video_on.png",
        },
        "title": "视频",
        "isBadge": true,
        "msgNum": 0,
        "isSel": false
    },
    {
        "icon": {
            "noIcon": "common/images/message.png",
            "yesIcon": "common/images/message_on.png",
        },
        "title": "消息",
        "isBadge": true,
        "msgNum": 109,
        "isSel": false
    },
    {
        "icon": {
            "noIcon": "common/images/me.png",
            "yesIcon": "common/images/me_on.png",
        },
        "title": "我的",
        "isBadge": true,
        "msgNum": 0,
        "isSel": false
    }
]
```

##### 回调事件：

|    名称     | 参数 |         描述          |
| :---------: | :--: | :-------------------: |
| @item-click |  无  | 底部tab导航点击时触发 |

##### License:

MulanPSL2, See the [LICENSE](https://gitee.com/chinasoft_ohos/navigation-bar-switch/blob/master/LICENSE) file for details.