uniapp 封装自定义导航栏

简单适配小程序胶囊和APP

首先把要用的API搞一起，封装一手

主要用到两个，设备系统信息和胶囊按钮信息
uni.getSystemInfoSync()
uni.getMenuButtonBoundingClientRect()
这里胶囊宽度我是直接用windowWidth减去left

	// 小程序胶囊/占位宽
	getMenuButtonWidth() {
		let menuButtonWidth = 0;
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect().left
		let systemInfo = uni.getSystemInfoSync().windowWidth
		menuButtonWidth = systemInfo - menuButtonInfo
		// #endif
		return menuButtonWidth;
	},
	// 导航栏
	getSystemInfo() {
		let globalData = {
			statusBarHeight: 0, // 状态导航栏高度
			navWidth: 0, //宽度
			navHeight: 100, // 总体高度
			navigationBarHeight: 0, // 导航栏高度(标题栏高度) 
			windowHeight: 0
		};
		// 状态栏高度
		globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		globalData.navWidth = uni.getSystemInfoSync().windowWidth
		// #ifdef APP-PLUS
		globalData.navHeight = 50 + globalData.statusBarHeight
		// #endif
		// #ifdef MP-WEIXIN
		// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
		const custom = wx.getMenuButtonBoundingClientRect()
		// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
		globalData.navHeight = custom.height + (custom.top - globalData.statusBarHeight) * 2
		console.log("导航栏高度："+globalData.navHeight)
		// #endif
		globalData.windowHeight = uni.getSystemInfoSync().windowHeight - globalData.navHeight - globalData
			.statusBarHeight
		return globalData
	}
}

然后整个导航栏开始封装

我这里直接把全部代码扔上去了，主要思路就是flex布局,然后中间的模块通过定位居中，这样就不会被胶囊影响到，导航栏高度就等于状态栏+胶囊高度，APP的就是状态栏+自己给个固定高度。