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;

		},

三、效果

相关推荐
@Carey5 小时前
uniapp配置消息推送unipush 厂商推送设置配置 FCM 教程
uni-app
转角羊儿5 小时前
uni-app上拉加载更多⑩
uni-app
慢慢雨夜13 小时前
uniapp发布到微信小程序,提示接口未配置在app.json文件中
微信小程序·小程序·uni-app
转角羊儿18 小时前
uni-app用户登录⑫
uni-app
转角羊儿18 小时前
uni-app文章列表制作⑨
uni-app
喵喵酱仔__18 小时前
uni-app之数据驱动的picker选择器( uni-data-picker)之可以选择到任意级别
uni-app
麻瓜呀18 小时前
uniapp隐藏自带的tabBar
uni-app
烤奶要加冰1 天前
uniapp解析蓝牙设备响应数据bug
前端·微信小程序·uni-app
慢半拍、1 天前
uni-app打包后报错云服务空间未关联
uni-app·unicloud·云服务空间·uniapp打包h5
黑云压城After1 天前
uniapp(API-Promise 化)
前端·javascript·uni-app