# weapp-navigation-bar

**Repository Path**: hihopeorg/weapp-navigation-bar

## Basic Information

- **Project Name**: weapp-navigation-bar
- **Description**: 自定义导航栏组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-26
- **Last Updated**: 2022-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# weapp-navigation-bar

#### 项目介绍
- 功能：自定导航栏


#### 效果演示
![gif](app-navigation-bar.gif)

## 下载安装
```shell
npm install @ohos/weapp_navigation_bar --save
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。



#### 使用说明：

第一步： 在hml文件中引入navigationBar组件；
```html
<element name="app-navigation-bar" src="weapp_navigation_bar/src/main/js/components/navigationbar/index.hml"></element>
```

第二步：在hml文件中写入：
```html

    <app-navigation-bar back-event="{{backEvent}}" back-home-event="{{backHomeEvent}}" color="{{color}}" title="{{title}}" back="{{false}}" background="{{barBg}}" home-path="{{
                homePath }}" back-style="{{backStyle}}" navigation-bar-text-style="{{navigationBarTextStyle}}" @back="backHome" @back-home="runBackHome"></app-navigation-bar>
```
第三步：在js文件写入需要的属性和方法
```javascript

         data: {
                 color:"#000000",
                 title:"测试标题",
                 barBg:"#f8f8f8",
                 backEvent:true,
                 backHomeEvent:false,
                 homePath:"",
                 backStyle: 'normal',
                 type:1,
                 fixed:true,
                 touchStartY:0,
                 navigationBarTextStyle:"black"
             },
             onInit() {
                 this.color="#000000"
                 this.title="测试标题"
                 this.barBg="#f8f8f8"
                 this.backEvent=true
                 this.backHomeEvent=false
                 this.homePath=""
                 this.backStyle= 'normal'
                 this.type=1
                 this.fixed= true
                 this.touchStartY = 0;
                 this.navigationBarTextStyle="white"
         
                 this.type = this.inputValue
                 if(this.inputValue == 1){
                     this.backStyle = 'normal'
                 }else if(this.inputValue == 2){
                     this.backStyle = 'normal'
                     this.homePath = "pages/index"
                 }else if(this.inputValue == 3){
                     this.backStyle = 'normal'
                 }else if(this.inputValue == 4){
                     this.backHomeEvent = true;
                     this.backStyle = 'normal'
                 }else if(this.inputValue == 5) {
                     this.backStyle = 'simple'
                 }else if(this.inputValue == 6) {
                     this.backStyle = 'normal'
                     this.fixed = false;
                 }else if(this.inputValue == 7) {
                     this.backStyle = 'normal'
                 }
             },
             onScroll(event) {
                 var offsetY = this.$element("x-scroll-view").currentOffset().y
                 if(event.scrollState == 1 &&  (offsetY - this.touchStartY) > 30){
                     this.$child('navigation-bar').toggleHide()
                 }else if(event.scrollState == 1 && (offsetY - this.touchStartY) < -30){
                     this.$child('navigation-bar').toggleShow()
                 }else if(event.scrollState == 0){
                     this.touchStartY = offsetY;
                 }
             },
         
             rateChange(e){
                 console.log(e.detail.value);
             },
             backHome(){
                 if(this.type == 3){
                     this.showDialog()
                 }else{
                     router.back()
                 }
             },
             runBackHome(){
                 if(this.type == 4){
                     this.showDialog()
                 }
             },
             showDialog() {
                 this.$element('simpledialog').show()
             },
             cancelDialog() {
             },
             cancelSchedule() {
                 this.$element('simpledialog').close()
             },
             setSchedule() {
                 this.$element('simpledialog').close()
                 router.back()
             },

```

 - 注意:导入请求入口js文件时需要根据自己的项目路径;具体详细使用方法可查看项目的案例。



##### 组件内部自定义方法
> toggleShow()/toggleHide()用于切换自定义导航栏的显示/隐藏。
##### 组件自定义属性说明
| 属性          | 说明                        | 类型    | 默认值      |
| ------------- | --------------------------- | ------- | ----------- |
| title         | 标题                        | String  | none        |
| color         | 标题字体颜色                | String  | #000000     |
| fontSize      | 导航栏字体大小，单位px、px | String  | 16px       |
| background    | 导航栏背景颜色              | String  | #ffffff     |
| placeholderBg | 导航栏占位栏背景色          | String  | transparent |
| back          | 是否显示导航栏返回按钮      | Boolean | false       |
| fixed         | 导航栏是否fixed定位置顶     | Boolean | true        |
| backStyle     | 导航栏返回按钮的风格支持simple和normal| String  | normal |
| backEvent   | 是否绑定返回按钮事件      | Boolean | false       |
| backHomeEvent   | 是否绑定返回首页按钮事件      | Boolean | false       |
| navigationBarTextStyle   | 主题颜色支持black和white      | String | white       |
##### 组件外部绑定事件说明
> 绑定事件前，先打开事件监听属性backEvent="{{true}}"，然后使用bind:事件名="callback"来绑定回调函数
>
| 事件名         | 说明                        | 事件是否冒泡    | 事件是否拥有捕获阶段      |
| ------------- | ---------------------------  | ------- | ----------- |
| back          | 返回按钮被点击                | 否  | 否        |
| backHome      | 返回首页按钮被点击             | 否  | 否     |

## 兼容性
支持 OpenHarmony API version 8 及以上版本。

## 目录结构
````
|---- entry
|     |---- pages  # 示例代码文件夹       
|---- weapp_navigation_bar  
|     |---- components  # 库文件夹 
|     |     |---- navigation  # 自定义组件文件夹                  
           
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/weapp-navigation-bar/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/weapp-navigation-bar/pulls) 。