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

2023年2月18日 118次阅读 来源: cocanile

效果图：

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

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;  //顶部状态栏的高度
		}
	})
},

    原文作者：cocanile
    原文地址: https://blog.csdn.net/phper_coca/article/details/124214420
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞