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

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

<view> 	<uni-nav-bar :height="totalHeight" backgroundColor="#FFC003" leftWidth="100%"> 			<block slot="left"> 				<view> 					<view class="navTitle"> 						哈哈哈 					</view> 				</view> 			</block> 		</uni-nav-bar> </view> 

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; 	}