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;

		},

三、效果

相关推荐
fanruitian1 天前
uniapp android开发 测试板本与发行版本
前端·javascript·uni-app
fanruitian1 天前
uniapp 创建项目
javascript·vue.js·uni-app
2501_915921432 天前
傻瓜式 HTTPS 抓包,简单抓取iOS设备数据
android·网络协议·ios·小程序·https·uni-app·iphone
yqcoder2 天前
uni-app 之 设置导航
uni-app
2501_915918412 天前
把 iOS 性能监控融入日常开发与测试流程的做法
android·ios·小程序·https·uni-app·iphone·webview
木子啊2 天前
UniApp全端水印组件muzi-watermark
uni-app·水印·全局水印·uniapp水印
木子啊2 天前
Uni-app企业级网络请求封装实战
uni-app·网络请求·request封装
yqcoder2 天前
uni-app 之 uni.showActionSheet
uni-app
2601_949804922 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp(
小程序·uni-app
裴嘉靖2 天前
uni-app 打包后 PDF 无法生成问题完整解决方案
pdf·uni-app