小程序自定义导航高度计算，标题居中

原创已于 2022-04-23 19:07:01 修改 · 910 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #前端 #css3

于 2022-04-16 15:30:17 首次发布

小程序同时被 3 个专栏收录

4 篇文章

订阅专栏

uniapp

4 篇文章

订阅专栏

css

1 篇文章

订阅专栏

这篇博客详细介绍了在uni-app中如何获取状态栏高度并设置自定义导航栏的过程。通过`uni.getSystemInfo` API获取设备信息，包括状态栏高度，然后在HTML模板、JS和CSS中进行相应的布局和样式设置。同时，文章提到了两种获取状态栏高度的方法，并展示了如何在onReady钩子中初始化数据。此外，还展示了SCSS样式的应用，用于定制导航栏的显示效果。

效果图：

HTML模板：

<!-- 头部导航栏 -->
		<view class="navbar" :style="[{'height': topHeight + 'px', 'padding-top': paddingHeight + 'px'}]">
			<view class="navbarleft">
				<image src="../../static/index1_img/logo@2x.png" mode="" ></image>
			</view>
			<view class="navbarright">首页{{navH}}</view>
			<view class="navbarright"></view>
		</view>

js:

data() {
			return {
				navH:statusBarHeight,
				headerSerch:{},//头部搜索
				swiperBg:{},//轮播
				topHeight:0,  //顶部导航栏的高度
				paddingHeight:0, //状态栏的高度
				HeaderBar:0  //导航栏（除状态栏）
			}
		},
		onReady(){
			//获取设备信息
			uni.getSystemInfo({
				success:(res)=>{
					let HeaderBar = 0
					// #ifdef MP
					let rect = wx.getMenuButtonBoundingClientRect(); //顶部胶囊信息
					this.HeaderBar = rect.height + (rect.top - res.statusBarHeight) * 2;;//顶部导航栏的高度(除状态栏)
					// #endif
					this.topHeight = this.HeaderBar + res.statusBarHeight; //顶部导航栏的高度
					this.paddingHeight = res.statusBarHeight;  //顶部状态栏的高度
				}
			})
		},

css:

  //scss
.navbar{
	display: flex;
	justify-content: space-between;
	padding: 0 40rpx;
	.navbarleft{
		width: 138rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 138rpx;
			height: 34rpx;
		}
	}
	.navbarright{
		width: 120rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

获取状态栏高度的2种方式

方案1、let statusBarHeight = uni.getSystemInfoSync().statusBarHeight; //状态栏的高度
方案2、onReady(){
	//获取设备信息
	uni.getSystemInfo({
		success:(res)=>{
			this.paddingHeight = res.statusBarHeight;  //顶部状态栏的高度
		}
	})
},