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;

		},

三、效果

相关推荐
孙 悟 空4 小时前
uni-app:监听页面返回,禁用返回操作
前端·javascript·uni-app
mosen86811 小时前
uniapp中uni.scss如何引入页面内或生效
前端·uni-app·scss
lyz24685911 小时前
uniapp popup弹窗组件的自定义使用方法
uni-app
沙尘暴炒饭11 小时前
uniapp 前端解决精度丢失的问题 (后端返回分布式id)
前端·uni-app
牛牛科技11 小时前
生产管理系统PHP+Uniapp源码
uni-app
Smile_ping11 小时前
uniapp——APP读取bin文件,解析文件的数据内容(一)
uni-app·uniapp 读取文件·app端读取bin文件
CDERP-plus11 小时前
uniapp 3分钟集成轮播广告图
uni-app·erp·erp移动端
Liberty_yes11 小时前
uniapp input苹果中文键盘输入拼音直接切换输入焦点监听失效
uni-app
街尾杂货店&11 小时前
webpakc介绍
uni-app
洗发水很好用1 天前
uniApp打包H5发布到服务器(docker)
uni-app