uniapp自定义顶部导航（小程序篇）

首先新建一个页面，设置为custom

"pages": [{
	"path": "pages/index/index",
	"style": {
        "navigationBarTitleText": "首页",
        // 单页导航栏设置,"default"默认显示 "custom"关闭状态
	    "navigationStyle": "custom",//设置不显示原生导航栏
       }
    }]

自定义获取手机设备信息方法，新建common文件，文件下新建system-info.js文件

用来获取设备各种信息

文件内容

/**
 * 此js文件管理关于当前设备的机型系统信息
 */
const systemInfo = function() {
	/****************** 所有平台共有的系统信息 ********************/
	// 设备系统信息
	let systemInfomations = uni.getSystemInfoSync()
	// 机型适配比例系数
	let scaleFactor = 750 / systemInfomations.windowWidth
	// 当前机型-屏幕高度
	let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx
	// 当前机型-屏幕宽度
	let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx
	// 状态栏高度
	let statusBarHeight = (systemInfomations.statusBarHeight) * scaleFactor //rpx
 
	// 导航栏高度  注意：此导航栏高度只针对微信小程序有效 其他平台如自定义导航栏请使用：状态栏高度+自定义文本高度
	let navHeight = 0 //rpx
	// console.log(windowHeight,'哈哈哈哈哈');
	
	/****************** 微信小程序头部胶囊信息 ********************/
	// #ifdef MP-WEIXIN
	const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
	// 胶囊高度
	let menuButtonHeight = menuButtonInfo.height * scaleFactor //rpx
	// 胶囊宽度
	let menuButtonWidth = menuButtonInfo.width * scaleFactor //rpx
	// 胶囊上边界的坐标
	let menuButtonTop = menuButtonInfo.top * scaleFactor //rpx
	// 胶囊右边界的坐标
	let menuButtonRight = menuButtonInfo.right * scaleFactor //rpx
	// 胶囊下边界的坐标
	let menuButtonBottom = menuButtonInfo.bottom * scaleFactor //rpx
	// 胶囊左边界的坐标
	let menuButtonLeft = menuButtonInfo.left * scaleFactor //rpx
 
	// 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
	navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
	// #endif
 
 
	// #ifdef MP-WEIXIN
	return {
		scaleFactor,
		windowHeight,
		windowWidth,
		statusBarHeight,
		menuButtonHeight,
		menuButtonWidth,
		menuButtonTop,
		menuButtonRight,
		menuButtonBottom,
		menuButtonLeft,
		navHeight
	}
	// #endif
 
	// #ifndef MP-WEIXIN
	return {
		scaleFactor,
		windowHeight,
		windowWidth,
		statusBarHeight
	}
	// #endif
}
 
export {
	systemInfo
}

将想要导航栏封装成组件，这里命名为t-navbar.vue

t-navbar.vue代码较多，根据项目需求自行删改

<template>
	<view>
		<view class="wx-head-mod" :style="{height:navHeight+'rpx'}">
			<view class="wx-head-mod-nav" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
				<view class="wx-head-mod-nav-content"
					:style="{height:customHeight+'rpx',justifyContent:'center'}">
					<!-- 文本区 -->
					<view class="wx-head-mod-nav-content-mian"
						:style="{lineHeight:customHeight + 'rpx'}">
						{{title}}
					</view>
				</view>
			</view>
		</view>

	
	</view>
</template>
 
<script>
	import {systemInfo} from '@/common/system-info.js'
	export default {
		name: "HeadView",
		props: {
			// 文本区内容
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				statusBarHeight: 0, //状态栏高度
				navHeight: 0, //头部导航栏总体高度
				navigationBarHeight:0, //导航栏高度
				customHeight: 0, //胶囊高度
				scaleFactor: 0, //比例系数
				menubarLeft:0, //胶囊定位的左边left
				windowWidth: 0
			};
		},
		methods: {

		},
		created() {
			/* 获取设备信息 */
			const SystemInfomations = systemInfo()
			/* 通用平台 */
			this.statusBarHeight = SystemInfomations.statusBarHeight //状态栏高度
			this.scaleFactor = SystemInfomations.scaleFactor //比例系数
			this.windowWidth = SystemInfomations.windowWidth //当前设备的屏幕宽度
			/* 微信小程序平台 */
			// #ifdef MP-WEIXIN
			this.navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //头部导航栏总高度
			this.navigationBarHeight = SystemInfomations.navHeight //头部导航栏高度
			this.customHeight = SystemInfomations.menuButtonHeight //胶囊高度
			this.menubarLeft = SystemInfomations.menuButtonLeft //胶囊左边界距离左上角的距离
			// #endif
		}
	}
</script>
 
<style>

	.wx-head-mod {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		/* background: linear-gradient(-35deg, #613A19 0%, #6F4E2B 100%); */
	}
 
	.wx-head-mod-nav {
		box-sizing: border-box;
		width: 100%;
		position: absolute;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
 
	}
 
	.wx-head-mod-nav-content {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		position: relative;
	}
 
	/* 文本区 */
	.wx-head-mod-nav-content-mian {
		box-sizing: border-box;
		height: 100%;
		text-align: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		color:#fff;
		font-size:36rpx;
	}
 
	/* 返回按钮 */
	.wx-head-mod-nav-content-back {
		box-sizing: border-box;
		width: 60rpx;
		height: 100%;
		/* background-color: aqua; */
		position: absolute;
		top: 0;
		left: 32rpx;
		display: flex;
		align-items: center;
		justify-content: left;
	}
 
	.wx-head-mod-nav-content-back-img {
		box-sizing: border-box;
	}
 
	
 </style>

app.vue文件引入（使用可自行决定）

<script>
	import {systemInfo} from '@/common/system-info.js'
	export default {
		globalData:{
			navHeight: 0
		},
		onLaunch: function() {
			this.globalData.navHeight=systemInfo().navHeight + systemInfo().statusBarHeight //头部导航栏总高度
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

index页面引入自定义导航并传递title

	import t-navbar '@components/t-navbar/t-navbar'
	const app=getApp()
	export default {
		components:{
			t-navbar
		},
		data() {
			return {
				title:'首页',
				navHeight:0
			}
		},
		onLoad() {
			this.navHeight=app.globalData.navHeight
		},
	}

使用

传递更多参数可参照title