HarmonyOS之JS UI自定义顶部导航栏NavBar

效果：

效果.png

文件结构：

文件结构.png

header.hml

    
    

    
    {{ title }}
    

        
    

header.js

import router from '@system.router';

export default {
    props: {
        title: {
            default: ""
        }, //标题
        hideBack: {
            default: false
        }, //是否显示返回键
        hideHome: {
            default: false
        }, //是否显示返回tabbr页面
        hideShare: {
            default: false
        }, //是否显示分享
        backgroundColor: {
            default: "#FF7700"
        } //背景色
    },
    onInit() {},
    back() {
        router.back()
    },
    home() {
        router.push({
            uri: 'pages/index/index'
        })
    },
    share() {
        console.info('分享')
    }
}

header.css

.position-content-center{
    position: fixed;
    width: 100%;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.position-content-right{
    position: fixed;
    width: 100%;
    align-content: flex-end;
    justify-content: flex-end;
}

.nav-wrap {
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
    background-color: #288FFF;
    color: #FFFFFF;
    z-index: 9999;
}

.nav-title {
    height: 50px;
    color: #FFFFFF;
    font-size: 20px;
}

.navbar-v-line {
    width: 1px;
    height: 32px;
    background-color: #e5e5e5;
    margin-top: 9px;
}

.back {
    width: 50px;
    height: 50px;
    padding: 13px;
}

使用