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

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

html 复制代码
<view>
	<uni-nav-bar :height="totalHeight" backgroundColor="#FFC003" leftWidth="100%">
			<block slot="left">
				<view>
					<view class="navTitle">
						哈哈哈
					</view>
				</view>
			</block>
		</uni-nav-bar>
</view>
javascript 复制代码
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;
	 },
}
css 复制代码
	.navTitle {
		padding-left: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		margin-bottom: 10rpx;
	}
相关推荐
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac9 小时前
微信小程序的组件
微信小程序
stormjun10 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck10 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23413 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong13 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟13 小时前
小程序跳转另一个小程序
小程序
16 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
19 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji19 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序