uniapp再次封装uni-nav-bar导航栏组件

<!-- components/custom-nav-bar/custom-nav-bar.vue -->
<template><view class="custom-nav" :style="{ backgroundColor: bgColor }"><!-- 状态栏占位 --><view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view><!-- 导航栏内容区 --><view class="nav-content" :style="navContentStyle"><view class="nav-left" @click="onClickLeft"><slot name="left"><view v-if="leftIcon" class="left-icon"><uni-icons :type="leftIcon" size="20" color="#333"></uni-icons></view></slot></view><view class="nav-center"><slot name="center"><text class="nav-title" :style="{ color: titleColor }">{{ title }}</text></slot></view><view class="nav-right"><slot name="right"><view v-if="rightIcon" class="right-icon" @click="onClickRight"><uni-icons :type="rightIcon" size="20" color="#333"></uni-icons></view></slot></view></view></view><!-- 占位，防止内容被遮挡 --><view v-if="fixed" class="nav-placeholder" :style="placeholderStyle"></view>
</template><script>
export default {name: 'CustomNavBar',props: {// 标题title: {type: String,default: ''},// 标题颜色titleColor: {type: String,default: '#333333'},// 左侧图标leftIcon: {type: String,default: 'left'},// 右侧图标rightIcon: {type: String,default: ''},// 背景颜色bgColor: {type: String,default: '#FFFFFF'},// 是否固定在顶部fixed: {type: Boolean,default: true}},data() {return {statusBarHeight: 0, // 状态栏高度navBarHeight: 44, // 导航栏高度menuButtonInfo: null // 胶囊按钮信息}},computed: {// 导航栏内容样式navContentStyle() {let style = {height: this.navBarHeight + 'px'}// #ifdef MP-WEIXINif (this.menuButtonInfo) {style = {...style,height: (this.menuButtonInfo.height + 8) + 'px',paddingTop: (this.menuButtonInfo.top - this.statusBarHeight) + 'px',paddingRight: (this.systemInfo.windowWidth - this.menuButtonInfo.left) + 'px'}}// #endifreturn style},// 占位符样式placeholderStyle() {return {height: (this.statusBarHeight + this.navBarHeight) + 'px'}}},created() {this.initNavBar()},methods: {// 初始化导航栏initNavBar() {// 获取系统信息const systemInfo = uni.getSystemInfoSync()this.systemInfo = systemInfothis.statusBarHeight = systemInfo.statusBarHeight// #ifdef MP-WEIXIN// 获取胶囊按钮信息this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()this.navBarHeight = (this.menuButtonInfo.height + 8)// #endif// #ifdef APP-PLUS// 判断是否是全面屏const isIphoneX = this.isIphoneX(systemInfo)if (isIphoneX) {this.navBarHeight = 48}// #endif},// 判断是否是全面屏isIphoneX(systemInfo) {const model = systemInfo.model.toLowerCase()const isIphoneX = model.includes('iphone x') || model.includes('iphone 11') ||model.includes('iphone 12') ||model.includes('iphone 13') ||model.includes('iphone 14') ||model.includes('iphone 15')return isIphoneX},// 左侧点击事件onClickLeft() {this.$emit('clickLeft')},// 右侧点击事件onClickRight() {this.$emit('clickRight')}}
}
</script><style lang="scss">
.custom-nav {position: relative;&.fixed {position: fixed;top: 0;left: 0;right: 0;z-index: 999;}
}.status-bar {width: 100%;
}.nav-content {position: relative;display: flex;align-items: center;justify-content: space-between;padding: 0 15px;box-sizing: border-box;.nav-left, .nav-right {min-width: 44px;height: 100%;display: flex;align-items: center;}.nav-center {flex: 1;text-align: center;.nav-title {font-size: 16px;font-weight: 500;}}.left-icon, .right-icon {display: flex;align-items: center;justify-content: center;width: 44px;height: 100%;}
}/* #ifdef MP-WEIXIN */
.custom-nav {padding-right: var(--window-right, 0);.nav-content {.nav-left {padding-left: 10px;}.nav-right {padding-right: 10px;}}
}
/* #endif *//* #ifdef APP-PLUS */
.custom-nav {.nav-content {padding: 0 12px;}
}
/* #endif */
</style>

使用示例

<!-- pages/index/index.vue -->
<template><view class="page"><!-- 基础用法 --><custom-nav-bar title="页面标题"@clickLeft="handleBack"/><!-- 自定义样式 --><custom-nav-bar title="自定义导航栏"titleColor="#FFFFFF"bgColor="#007AFF"rightIcon="more"@clickLeft="handleBack"@clickRight="handleMore"/><!-- 自定义内容 --><custom-nav-bar><template #left><view class="custom-left">返回</view></template><template #center><view class="custom-center"><image src="/static/logo.png" mode="aspectFit" /></view></template><template #right><view class="custom-right"><button size="mini">操作</button></view></template></custom-nav-bar><!-- 页面内容 --><view class="content">页面内容</view></view>
</template><script>
export default {methods: {handleBack() {uni.navigateBack({delta: 1})},handleMore() {uni.showToast({title: '点击了更多'})}}
}
</script><style lang="scss">
.page {min-height: 100vh;background-color: #f5f5f5;
}.content {padding: 15px;
}.custom-left {font-size: 14px;color: #333;
}.custom-center {height: 30px;image {height: 100%;width: auto;}
}.custom-right {button {margin: 0;}
}
</style>

组件的主要特点：

1. 自适应状态栏高度

1. 支持自定义标题、图标和颜色

1. 支持自定义左中右三个插槽

1. 适配微信小程序胶囊按钮

1. 适配 iPhone 全面屏

1. 支持固定顶部

使用方法：

1. 将组件文件放入项目的 components 目录
2. 在页面中引入并注册组件