最终效果：
一、关闭默认导航栏
pages.json文件中，对单个页面关闭
"navigationStyle": "custom"
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "控制台","navigationStyle": "custom"}},{"path" : "pages/message/message","style" : {"navigationBarTitleText" : "消息"}}],二、组件设计
<template><view><!-- 状态栏占位 --><view :style="{paddingTop: statusBarHeight + 'px'}"></view><!-- 导航栏内容 --><view :style="{height: navBarHeight + 'px'}" class="navBarComponent"><view class="navContent"><text class="title">{{titles}}</text><view class="right" :style="{width: count*40 + 'px'}" v-if="count > 0" ><view class="item" v-for="(item, index) in icons" :key="index"><image :src="item.icon" class="imageShow" @click="toPage(item.link)"></image></view></view></view></view></view>
</template><script>export default {name:"navigationBar",data() {return {statusBarHeight: 0,navBarHeight: 0,count: 0,icons: []};},props:{titles: String,links: Array},methods: {toPage(url){uni.navigateTo({url:url})}},created() {// 动态获取手机状态栏高度（电量显示区域），H5没有状态栏，会为0this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];// #ifdef H5this.navBarHeight = 45// #endif// #ifndef H5this.navBarHeight = this.statusBarHeight + 11// #endifif(typeof this.$props.links === 'undefined'){this.count = 0}else{this.count = this.$props.links.lengththis.icons = this.$props.links}}}
</script><style lang="scss">.navBarComponent {display: flex;align-items: center;box-sizing: border-box;.navContent{display: flex;align-items: center;padding-left: 15px;padding-right: 15px;width: 100%;.title{font-size: 24px;flex: 1;}.right{display: flex;width: 120px;height: 100%;align-items: center;justify-content: space-between;.item{background-color: white;width: 36px;height: 36px;border-radius: 50%;display: flex;align-items: center;justify-content: center;.imageShow{width: 60%;height: 60%;}}}}}
</style>三、使用
<navigationBar :titles="'控制台'" :links="icons"></navigationBar>图标链接数据：
this.icons = [{icon: '/static/icon/notify.png',link: '/pages/message/message'},{icon: '/static/icon/scan.png',link: '/pages/message/message'}
]不同框架下的语法会有区别
