[移动开发]微信小程序自定义导航栏

微信小程序自定义导航栏

1. 在需要的页面.json文件中配置使用自定义导航栏： “navigationStyle”: "custom"

2. app.js文件 计算导航栏高度等信息

App({
	globalData: {},
	onLaunch() {
		// ==========================导航栏计算============================
		// 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
		let menuButtonObject = wx.getMenuButtonBoundingClientRect();
		wx.getSystemInfo({
			success: res => {
				/* 
				1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2；
				2. 胶囊按钮与顶部的距离 = top；
				3.胶囊按钮与右侧的距离 = windowWidth - right
				*/
				console.log('设备信息=', res, '状态栏的高度=', res.statusBarHeight)
				let statusBarHeight = res.statusBarHeight,
					navTop = menuButtonObject.top * 2, //胶囊按钮与顶部的距离
					navHeight = (statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2) * 2;
				this.globalData.navHeight = navHeight; //导航栏高度,整个顶部
				this.globalData.navTop = navTop; // 导航栏上方的距离，手机信号等部分
				this.globalData.navLeft = (res.windowWidth - menuButtonObject.right) * 4 //返回按钮左侧距离||导航栏左右padding
				// this.globalData.windowHeight = res.windowHeight; //整体高度（导航栏+下方区域）
				// console.log(this.globalData) // *2获取的是rpx
			},
			fail(err) {
				console.log(err);
			}
		})
	},

})