网站导航栏高度(导航栏尺寸规格一般是多少)

在 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…

下期给大家分享更多实战中的点滴,敬请期待~

欢迎各位关注、留言,大家的支持就是我的动力!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022年6月16日 10:26:33
下一篇 2022年6月16日 10:36:44

相关推荐