uniapp顶部导航栏高度适配

为了实现好看又实用的顶部导航栏,不得不自己定义导航栏样式。而自己定义的导航栏高度会因为手机的型号不同所展示的效果也就不同,所以只能通过适配高度来达到预期的效果

1.需要在page.json文件中对需要自定义导航栏文件进行配置

"navigationStyle":"custom" //取消默认的原生导航栏

2.在页面中添加占位元素

html 复制代码
		<!-- 状态栏高度 -->
<view :style="{ height: `${statusBarHeight}px` }"></view>

 <!-- 自定义导航栏高度  -->
        <view :style="{
          height: `${barHeight}px`,
          'line-height': `${barHeight}px`
        }">
            <text>评价</text>
        </view>

3.借助钩子函数mounted完成逻辑处理

javascript 复制代码
	mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			const {
				top,
				height
			} = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
		},

这样就行了,不同的设备导航栏高度就会自适应了

相关推荐
十八朵郁金香几秒前
深入解析:ES6 中 class 与普通构造器的区别
前端·ecmascript·es6
JohnYan1 分钟前
工作笔记 - 一个浏览器环境适用的类型转换工具
javascript·后端·设计模式
索迪迈科技11 分钟前
CommonJS与ES6模块的区别
前端·ecmascript·es6
前端Hardy13 分钟前
12个被低估的 CSS 特性,让前端开发效率翻倍!
前端·javascript·css
前端Hardy22 分钟前
HTML&CSS:精美的3D折叠卡片悬停效果
前端·javascript·css
nightunderblackcat22 分钟前
新手向:中文语言识别的进化之路
前端·javascript·easyui
Spider_Man1 小时前
打造属于你的前端沙盒 🎉
前端·typescript·github
用户47949283569151 小时前
🤫 你不知道的 JavaScript:`"👦🏻".length` 竟然不是 1?
前端·javascript·面试
掘金一周1 小时前
凌晨零点,一个TODO,差点把我们整个部门抬走 | 掘金一周 9.11
前端·人工智能·后端
用户8174413427481 小时前
kubernetes核心概念 Service
前端