很多情况下,系统自带的导航栏无法满足UI设计的要求,这时候就需要我们自定义导航栏来实现需求,要考虑跨端的多种情况,这里我们封装成一个组件来使用,实现效果如下:
一、H5、App、微信小程序的区别
1.H5:导航栏高度可以设为44px,它没有状态栏,因为H5端运行在浏览器中,浏览器已经处理了安全区;
总高度 = 44px
2.App:导航栏高度也是44px,它的状态栏高度是不一定的,每个机型的安全区是不一样尺寸,所以获取安全区高度来计算。
总高度 = 安全区高度 + 44px
3.微信小程序:导航栏高度和状态栏高度都与机型的尺寸有关,其中状态栏高度需要获取安全区高度来计算,导航栏高度需要获取小程序右上角的“胶囊”高度和top值来计算。
总高度 = 安全区高度 + 导航栏高度
导航栏高度 = 胶囊高度 + 上间距 + 下间距
上间距 = 下间距 = 胶囊.top - 状态栏高度
即:总高度 = 状态栏高度 + (胶囊高度 + (胶囊.top - 状态栏高度)*2)
二、在components中创建一个组件名称为 navbar,先展示组件完整代码
<template> <view class="navbar"> <view class="fixed-content"> <!-- 状态栏高度 --> <view :style="{'height': geStatusBarHeight + 'px'}"></view> <!-- 导航栏高度 --> <view class="bar-content" :style="{'height': getNavBarHeight()+'px'}"> <slot> <image @tap="navigateBack()" class="nav-left" src="/static/img/common/arrow-left.png" mode=""></image> <view class="nav-title">{{ title }}</view> </slot> </view> </view> <!-- 占位高度,状态栏高度+导航栏高度,父组件就不需要计算导航栏高度 --> <view :style="{'height': geStatusBarHeight + getNavBarHeight() + 'px'}"></view> </view></template>
<script> export default { name:'Navbar', props:{ title:{ type: String, default:'' } }, methods: { // 获取状态栏高度 geStatusBarHeight(){ return uni.getSystemInfoSync()['statusBarHeight'] }, // 获取导航栏高度 getNavBarHeight(){ // #ifdef MP-WEIXIN let menuButtonInfo = uni.getMenuButtonBoundingClientRect() // 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调 (menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距) let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2 + 2 // #endif // #ifdef APP-PLUS || H5 let navbarHeight = 44 // #endif return navbarHeight }, navigateBack(){ uni.navigateBack() } } }</script>
<style lang="scss" scoped> .navbar{ .fixed-content { position: fixed; top: 0; left: 0; width: 100%; padding: 0 24rpx; z-index: 1996; .bar-content{ display: flex; align-items: center; position: relative; .nav-left{ width: 22px; height:22px; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); } .nav-title{ color: #fff; font-weight: bold; font-size: 16px; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); text-align: center; } } } }</style>
三、在页面中使用组件
1.直接使用默认样式,将和系统导航栏一致。
<navbar></navbar>
2.slot 替换默认的样式。
<navbar> <!-- slot 替换默认的样式 --> <view class="status-bar-box"> <view class="select-city"> <image src="/static/img/index/icon-city.png"></image> <view class="">杭州市</view> </view> <view class="status-bar-title">汽车租赁</view> </view></navbar>
四、扩展
一开始导航栏背景是透明的,是根据页面的背景图来呈现。那么滚动的时候就不是很友好了,这时候我们可以加一个滚动阈值,让导航栏变成白色背景,文字黑色。类似如下效果: