uniapp自定义navigationBar

最终效果：

一、关闭默认导航栏

pages.json文件中，对单个页面关闭

"navigationStyle": "custom"

javascript 复制代码

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "控制台",
				"navigationStyle": "custom"
			}
		},
		{
			"path" : "pages/message/message",
			"style" : 
			{
				"navigationBarTitleText" : "消息"
			}
		}
		
	],

二、组件设计

html 复制代码

<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没有状态栏，会为0
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			// #ifdef H5
			this.navBarHeight = 45
			// #endif
			// #ifndef H5
			this.navBarHeight = this.statusBarHeight + 11
			// #endif
			
			if(typeof this.$props.links === 'undefined'){
				this.count = 0
			}else{
				this.count = this.$props.links.length
				this.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>

三、使用

html 复制代码

<navigationBar :titles="'控制台'" :links="icons"></navigationBar>

图标链接数据：

javascript 复制代码

this.icons = [
	{
	    icon: '/static/icon/notify.png',
	    link: '/pages/message/message'
	},
	{
		icon: '/static/icon/scan.png',
		link: '/pages/message/message'
	}
]

不同框架下的语法会有区别