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

效果：

效果.png

文件结构：

文件结构.png

header.hml

<div class="nav-wrap">
    <image src="../images/back.png" if="hideBack" class="back" @click="back"></image>
    <div class="navbar-v-line" if="hideHome"></div>
    <image src="../images/home.png" class="back" if="hideHome" @click="home"></image>
    <text class="nav-title position-content-center">{{ title }}</text>
    <div class="position-content-right" if="hideShare">
        <image src="../images/share.png" class="back" @click="share"></image>
    </div>
</div>

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;
}

使用

<element name="header" src="../../common/header/header.hml"></element>
<div class="container"> 
  <header title="测试页面" hide-back="true" hide-home="true" hide-share="true"> </header>
</div>