uniapp_微信小程序自定义顶部导航栏和右侧胶囊对齐(不对齐来打我)

一、想要的效果

思路首先开启自定义导航栏,取消自带的导航栏,然后计算胶囊的高度和标题对齐

二、成品代码

1、首先再你需要居中的代码添加以下style

javascript 复制代码
	<view class="header"
				:style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',lineHeight:navBarHeight + 'px'}">


			</view>

2、模板上写上这几个变量

javascript 复制代码
data(){

return{
                 navBarTop: null,
				navBarHeight: null,
}
}

3、onload计算高度并赋值

javascript 复制代码
		onLoad() {
			let statuBar = uni.getSystemInfoSync().statusBarHeight;
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			console.log(menuButtonInfo)
			this.navBarTop = menuButtonInfo.top;
			this.navBarHeight = menuButtonInfo.height;

		},

三、效果

相关推荐
anyup10 小时前
支持鸿蒙!开源三个月,uView Pro 开源库近期更新全面大盘点,及未来计划
前端·vue.js·uni-app
阿斌_bingyu70914 小时前
uniapp实现android/IOS消息推送
android·ios·uni-app
茶憶18 小时前
UniApp RenderJS中集成 Leaflet地图,突破APP跨端开发限制
javascript·vue.js·uni-app
2501_915918411 天前
移动端 HTTPS 抓包实战,多工具组合分析与高效排查指南
数据库·网络协议·ios·小程序·https·uni-app·iphone
雪芽蓝域zzs1 天前
uni-app 将 base64 图片编码转为 Blob 本地文件路径
网络协议·udp·uni-app
星光一影2 天前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码
mysql·小程序·uni-app·php
Qlittleboy2 天前
uniapp里 rich-text 里的img图片如何控制最大宽度
uni-app
阿奇__2 天前
uniapp h5 app 小程序获取当前定位
小程序·uni-app
*小雪2 天前
uniapp写H5授权登录及分享,返回到目标页面
开发语言·javascript·uni-app
一只程序熊2 天前
uniapp uniim ios配置消息推送
uni-app