# TitleBar

**Repository Path**: chinasoft6_ohos/title-bar

## Basic Information

- **Project Name**: TitleBar
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-09
- **Last Updated**: 2021-09-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

##### TitleBar

提供title组件，可以灵活配置字体、图标多个有序展示问题，同时支持组件背景、字体、图标透明度变化设置，配合原生list组件滑动时使用。

##### 权限列表
ohos.permission.INTERNET（如果使用云端路径）

##### 属性

支持如下属性

| 名称              | 类型                                                         | 默认值                                                       | 必填 | 描述                                                         |
| ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| backgroundSetting | {     color:string,     opacityOn: boolean，paddingTop:number} | {     color: "#FFFFFFFF",     opacityOn: false，paddingTop:0 } | 否   | 背景设置包括颜色和背景透明度是否逐渐变化，其中color颜色设置暂时只支持8位16进制表示 |
| leftSetting       | { type : string, text :string, url : string, color : string , opacityOn :boolean, opacityIncrease :boolean, param :object} | { type : text , text :"", url : "", color : "" , opacityOn :false, opacityIncrease :true, param :{}} | 否   | 标题左侧设置，type为“text”时，表示当前设置的是文字，text为文字内容；type为“url”表示当前设置的是icon,url为icon的路径,opacityOn表示透明度变化效果开启,opacityIncrease为true表示内部样式opacity逐渐变为1，param提供用户传入的参数设置，设置后触发事件能获取参数。 |
| rightSetting      | { type : string, text :string, url : string, color : string , opacityOn :boolean, opacityIncrease :boolean, param :object} | { type : text , text :"", url : "", color : "" , opacityOn :false, opacityIncrease :true, param :{}} | 否   | 标题右侧侧设置，type为“text”时，表示当前设置的是文字，text为文字内容；type为“url”表示当前设置的是icon,url为icon的路径,opacityOn表示透明度变化效果开启,opacityIncrease为true表示内部样式opacity逐渐变为1，param提供用户传入的参数设置，设置后触发事件能获取参数。 |
| maxNumberRange    | Number                                                       | 200                                                          | 否   | 将title组件背景样式opacity设置的范围0-1，按比例扩大时对应的最大的数值 |
| currentNumber     | Number                                                       | 0                                                            | 否   | 当前的变化的数值（配合list组件使用，设滚动的距离为当前值）   |

##### 事件

支持如下事件

| 名称                | 参数                                              | 描述                                                         |
| ------------------- | ------------------------------------------------- | ------------------------------------------------------------ |
| onLeftSettingClick  | param                                             | 用户在设置时自定义的参数                                     |
| onRightSettingClick | param                                             | 用户在设置时自定义的参数                                     |
| onOpacityChange     | {     status:number,     currentOpacity: string } | currentNumber小于0时，status为-1，在[0,maxNumberRange]内为1，大于maxNumberRange为2；currentOpacity为按比例计算当前的opacity的值 |

##### 示例

index页面

````html
<!-- xxx.hml -->
<element name='comp' src='../../common/titleBar/titleBar.hml'></element>
<div class="container">
    <div style="position : fixed;">
        <comp background-setting="{{ bgSetting }}"
              center-setting="{{ centerSetting }}"
              right-setting="{{ rightSetting }}"
              @event-right="rightSettingClick"
                >
        </comp>
    </div>
    <div class="area">
        <button @click="goto">
            跳转
        </button>
    </div>
</div>

````

```css
/* xxx.css */
.container {
    flex-direction: column;
    position: relative;
    width: 720px;
}
.area {
    height: 70%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

button {
    padding: 20px 200px;
}

```

```javascript
// xxx.js
import prompt from '@system.prompt';
import router from '@system.router';

export default {
    data() {
        return {
            currentOffsetY: 0,
            bgSetting: {
                color: "#EDEDED"
            },
            centerSetting: {
                text: "我的消息(2)",
                opacityOn: false,
                opacityIncrease: false,
            },
            rightSetting: [{
                               type: 'icon',
                               url: '/common/titleBar/icons/scan.png',
                               param: {
                                   id: 0
                               }
                           }, {
                               type: 'icon',
                               text: "...",
                               url: '/common/titleBar/icons/search.png',
                               param: {
                                   id: 1
                               }
                           }, {
                               type: 'icon',
                               url: '/common/titleBar/icons/add-circle.png',
                               param: {
                                   id: 2
                               }
                           }]
        }
    },
    goto() {
        router.replace({
            uri: "pages/index2/index2"
        })
    },
    scan() {
        prompt.showToast({
            message: '扫一扫......'
        });


    },
    search() {
        prompt.showToast({
            message: '搜索......'
        });


    },
    more() {
        prompt.showToast({
            message: '菜单......'
        });


    },
    getScrollY(e) {
        let ele = this.$element('list').currentOffset();
        this.currentOffsetY = ele.y;
    },
    rightSettingClick({detail:{
        id
    }}) {
        switch (id) {
            case 0:
                this.scan();
                break;
            case 1:
                this.search();
                break;
            case 2:
                this.more();
                break;
        }
    }
}
```

index2页面

```html
<!-- xxx.hml -->
<element name='comp' src='../../common/titleBar/titleBar.hml'></element>
<div class="container">
    <div style="position : fixed; flex-direction : column;">
        <div show="{{ showTitle1 }}">
            <comp background-setting="{{ bgSetting1 }}"
                  left-setting="{{ leftSetting }}"
                  center-setting="{{ centerSetting }}"
                  right-setting="{{ rightSetting }}"
                  @event-left="leftSettingClick"
                  @event-right="rightSettingClick"
                  max-number-range="{{maxOffsetNumber}}"
                  current-number="{{ currentOffsetY }}"
                    >
            </comp>
        </div>

        <div show="{{ showTitle2 }}">
            <comp background-setting="{{ bgSetting2 }}"
                  left-setting="{{ leftSetting2 }}"
                  center-setting="{{ centerSetting2 }}"
                  right-setting="{{ rightSetting2 }}"
                  @event-left="leftSettingClick"
                  @event-right="rightSettingClick"
                  max-number-range="60"
                  current-number="{{ currentOffsetY - maxOffsetNumber }}"
                    >
            </comp>
        </div>

    </div>
    <div style="position : relative; width : 100%;">
        <list @scroll="getScrollY" id="list">
            <list-item class="list-item-con">
                <image src="common/images/bg.png" style="height : 550px;">
                </image>
                <div>
                    <div style="width : 100%; position : absolute; top : -60px; justify-content : flex-end;
                            padding-right : 20px;">
                        <text style="top : -20px; color : #FFFFFF; padding-right : 10px;">一枚咸鱼</text>
                        <image src="common/images/user.png"
                               style="height : 100px; width : 100px; border-radius : 30px;">
                        </image>
                    </div>
                </div>
                <div class="box">
                </div>
            </list-item>
        </list>
    </div>

</div>
```

```css
/* xxx.css */
.container {
    flex-direction: column;
    position: relative;
    width: 720px;
}

.list-item-con {
    flex-direction: column;
}

.title {
    font-size: 100px;
}

.box {
    height: 150%;
    width: 100%;
    opacity: 0.1;
}

```

```js
// xxx.js
import prompt from '@system.prompt';
import router from '@system.router';

export default {
    data() {
        return {
            currentOffsetY: 0,
            leftSetting: [{
                              type: 'icon',
                              url: 'common/titleBar/icons/back_w.png',
                              opacityOn: true,
                              opacityIncrease: false,
                              param: {
                                  id: "1"
                              }
                          }
            ],
            leftSetting2: [
                {
                    type: 'icon',
                    url: 'common/titleBar/icons/back.png',
                    opacityOn: true,
                    opacityIncrease: true,
                    param: {
                        id: "1"
                    }
                }
            ],
            bgSetting1: {
                color: '#00EDEDED',
                opacityOn: false
            },
            bgSetting2: {
                color: '#00EDEDED',
                opacityOn: true
            },
            centerSetting: {
                text: "",
            },
            centerSetting2: {
                text: "朋友圈",
                opacityOn: true,
                opacityIncrease: true,
            },
            rightSetting: [{
                               type: 'icon',
                               url: '/common/titleBar/icons/拍照.png',
                               opacityOn: true,
                               opacityIncrease: false,
                               param: {
                                   id: 2
                               }
                           }],
            rightSetting2: [{
                                type: 'icon',
                                url: '/common/titleBar/icons/拍照_b.png',
                                opacityOn: true,
                                opacityIncrease: true,
                                param: {
                                    id: 2
                                }
                            }],
            showTitle1: true,
            showTitle2: false,
            maxOffsetNumber: 428, // 向上滑动，让背景图刚被titleBar背景遮盖住，此时list组件产生的offset距离确定的
        }
    },
    back() {
        prompt.showToast({
            message: '返回......'
        });
    },
    more() {
        prompt.showToast({
            message: '菜单......'
        });


    },
    getScrollY(e) {
        console.log(e);
        let ele = this.$element('list').currentOffset();
        this.currentOffsetY = ele.y;
        if (this.currentOffsetY > this.maxOffsetNumber) {
            this.showTitle1 = false;
        } else {
            this.showTitle1 = true;
        }
        if (this.currentOffsetY > this.maxOffsetNumber) {
            this.showTitle2 = true;
        } else {
            this.showTitle2 = false;
        }
    },
    leftSettingClick(event) {
        console.log('ssss')
        router.replace({
            uri: "pages/index/index"
        })
    },
    rightSettingClick(event) {
        console.log('ssss');
        prompt.showToast({
            message: '拍摄......'
        });
    },
}
```

##### 效果展示

<img src="https://images.gitee.com/uploads/images/2021/0917/000051_b0b12f52_5370371.gif" alt="title" style="zoom:80%;" />

##### 代码参考

https://gitee.com/chinasoft6_ohos/title-bar.git

作者：瞿纬乾