微信小程序自定义顶部导航栏,动态适配包括胶囊

 	 			 				 					 						哈哈哈 					 				 			 		  

menu: [], statusBarHeight: 0, //状态栏的高度  navigatorHeight: 0, //导航栏高度 menuHeight: 0, //胶囊高度 menuTop: 0, //胶囊与顶部的距离 totalHeight: 0, //总高度  onShow() { 	// 获取系统信息 	uni.getSystemInfo({ 		success: res => { 			this.system = res; 			this.statusBarHeight = this.system.statusBarHeight; // 状态栏高度 			this.calculateNavBarHeight() 		} 	}); }, methods：{ 	calculateNavBarHeight() { 		// 获取胶囊信息 		this.menu = uni.getMenuButtonBoundingClientRect(); 		// 计算组件高度 		this.menuHeight = this.menu.height; // 胶囊高度 		this.menuTop = this.menu.top; // 胶囊与顶部的距离 		// 导航栏高度= （胶囊顶部距离-状态栏高度） x 2 + 胶囊的高度 		this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height; 		// 总高度 = 状态栏的高度 + 导航栏高度     		this.totalHeight = this.statusBarHeight + this.navigatorHeight; 	 }, } 

	.navTitle { 		padding-left: 36rpx; 		font-family: PingFang SC, PingFang SC; 		font-weight: bold; 		font-size: 36rpx; 		color: #000000; 		margin-bottom: 10rpx; 	}