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

cocanile

已于 2022-04-23 19:07:01 修改

阅读量858

点赞数

分类专栏：小程序 uniapp css 文章标签：微信小程序前端 css3

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

本文链接：https://blog.csdn.net/phper_coca/article/details/124214420

版权

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

4 篇文章 0 订阅

订阅专栏

uniapp

4 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

效果图：

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