uniapp实战笔记使用uni-nav-bar自定义顶部状态栏和导航栏 _自定义

要须心地收汗马，孔孟行世目杲杲。这篇文章主要讲述uniapp实战笔记使用uni-nav-bar自定义顶部状态栏和导航栏相关的知识，希望能为你提供帮助。
在 uniapp 中，原生导航栏渲染速度最快，但可自定义性较差，往往满足不了项目需求，通常都需要开发者自行开发导航栏，这里使用了 uni-nav-bar 来自定义顶部状态栏和导航栏，本期分享一下开发的过程和心得。

使用组件

问题描述在使用 NavBar 组件后，其顶部状态栏和顶部导航栏会在大部分机型下表现为高度64px ，在某些特殊机型下会表现为高度 88px（如iPhone X）。页面内使用了 uView 的 tabs 标签组件，配合 Swiper 轮播图组件作为可轮播切换的商品列表页。tabs 组件要求需要吸顶，这就引出了问题，因为使用到的组件为外部引入，对于其内部样式的修改，需要通过获取 “顶部状态栏 + 顶部导航栏” 的高度后重新设置吸顶的高度。

解决方案“顶部状态栏 + 顶部导航栏” 的高度几乎所有页面适用，所以写在 mixin 中：

/**
* 顶部状态量 + 顶部导航栏高度获取
*/
export default
data()
return
navbarHeight: Number

,
onReady()
// #navbar为NavBar组件设置的id
let info = uni.createSelectorQuery().select(#navbar)
info
.boundingClientRect((data) =>
this.navbarHeight = data.height
)
.exec()

在需要使用到 navbarHeight 的页面中引入 mixin 后，针对无法通过 js 修改外部引入组件样式的场景，想了半天最终是在组件的外部包裹多一层 view：

< !-- 对 uni-nav-bar组件进行二次封装的nav组件 -->
< demo-navbar
left-icon="back"
status-bar
fixed
:title="navBarTitle"
id="navbar"
> < /demo-navbar>
< !-- tab栏区域 -->
< view class="tabs":style=" top: navbarHeight + px ">
< u-tabs
active-color="rgb(42,161,223)"
:list="list"
:current="current"
@change="change"
> < /u-tabs>
< /view>

吸顶样式很简单：

.tabs
position: sticky;
z-index: 999;

总结对于像顶部及底部导航栏，在原生导航栏无法满足需求的情况下，往往都需要开发者自行开发，将这一类组件抽离，全局统一管理，有利于后续的开发维护工作。继续加油，Keep learning…

?下期给大家分享更多实战中的点滴，敬请期待~
【uniapp实战笔记使用uni-nav-bar自定义顶部状态栏和导航栏】欢迎各位关注、留言，大家的支持就是我的动力！