uniApp顶部导航自定义设置

新建组件custom-navbar组件

自定义一个custom-navbar导航，全局引入到main.js文件中，在每个需要顶部导航的页面引入自定义顶部导航

<template>
	<view class="">
		<view class="nabbar" :style="{'height': statusBarHeight + barHeight + 'px',}"></view>
		<view class="nabbar-bar" :style="{'height': statusBarHeight + barHeight + 'px','background': bgColor}">
			<!-- //手机状态栏 -->
			<view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>
			<!-- //导航栏 -->
			<view class="nabbar-box flex-cent" :style="{'heigth': barHeight + 'px' }">
				<text class="iconfont icon-xiangzuo left-icon" :style="{ 'color': titleColor}"
				v-show="isGoBack" @click="onGoBack"></text>
				<text class="title" :style="{ 'color': titleColor}">{{title}}</text>
				<image v-show="isNotice" class="notice-icon" src="@/static/images/xs-notice01.png" mode="" @click="$appH5Link('notice')"></image>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		name: "Nabbar",
		props: {
			title: {
				default: '',
				type: String
			},
			isGoBack: {
				default: true,
				type: Boolean
			},
			bgColor: {
				default: '',
				type: String
			},
			titleColor: {
				default: '#313139',
				type: String
			},
			isNotice: {
				default: false,
				type: Boolean
			}
		},
		data() {
			return {
				statusBarHeight: 20,
				barHeight: 44,
				barWidth: null,
			};
		},
		created() {
			
			//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
			let {statusBarHeight,system} = uni.getSystemInfoSync()
			// #ifdef APP-PLUS
			this.statusBarHeight = statusBarHeight
			// #endif
			// #ifdef H5
			this.statusBarHeight = statusBarHeight
			// #endif
			this.barHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 44 : 48)
		},
		methods: {
			onGoBack() {
				uni.navigateBack()
			}
		}
	}
</script>
 
<style lang="scss">
	.nabbar {
		width: 100%;
		overflow: hidden;
	}
	.nabbar-bar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		// background-color: #FFFFFF;
		// height: var(--status-bar-height);
		z-index: 999;
	}
	.status-bar {
		width: 100%;
	}
 
	.nabbar-box {
		width: 100%;
		height: 88rpx;
		padding: 0 16rpx;
		z-index: 1000;
		.left-icon {
			font-size: 36rpx;
			color: #000;
			position: absolute;
			left: 10rpx;
			line-height: 1;
			font-weight: 600;
			
		}
		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #313139;
			line-height: 1;
		}
		.notice-icon {
			position: absolute;
			right: 20rpx;
			width: 36rpx;
			height: 38rpx;
		}
	}
</style>

mian.js中引入组件

import customNavbar from '@/components/custom-navbar.vue'
Vue.component('custom-navbar', customNavbar);

在父组件中使用

引入父组件中

<template>
	<view>
		<custom-navbar title="" :isGoBack="false" :isNotice="true"></custom-navbar>
	</view>
</template>
<script>
	export default {
		
		
	}
</script>

在pages.json文件中设置导航隐藏

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "",
		"navigationBarBackgroundColor": "#ffffff",
		"backgroundColor": "#F4F6FA",
		"titleNView": false,
		"app-plus": {
			"titleNView": false, //禁用原生导航栏
			"scrollIndicator": false, // 是否下拉
			"pullToRefresh": {// 下拉样式设置
				"style": "circle",
				"color": "#C90F07"
			}
		}
		
	},