当前位置：首页 > news >正文

Uniapp 自定义头部导航栏

news 2025/8/15 6:40:14

Uniapp 自定义头部导航栏指南

在 Uniapp 中自定义头部导航栏可以通过以下几种方式实现：

1. 全局配置

在 pages.json 中进行全局配置：

{"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "默认标题","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}
}

"style": {"navigationBarTitleText": "首页",      // 设置导航栏标题文字"navigationBarBackgroundColor": "#FF0000",  // 设置导航栏背景颜色"navigationBarTextStyle": "white"     // 设置导航栏文字颜色
}

2. 单页面配置

在 pages.json 中为特定页面配置：

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","navigationBarBackgroundColor": "#FF0000","navigationBarTextStyle": "white"}}]
}

3. 完全自定义导航栏

如果需要更复杂的自定义，可以隐藏原生导航栏并使用自定义组件：

首先在 pages.json 中隐藏原生导航栏：

{"pages": [{"path": "pages/index/index","style": {"navigationStyle": "custom"}}]
}

然后创建自定义导航栏组件，例如 custom-nav-bar.vue：

<template><view class="custom-nav-bar"><view class="nav-bar-content"><!-- 返回按钮 --><view class="back-btn" @click="handleBack" v-if="showBack"><image src="/static/back.png" mode="aspectFit"></image></view><!-- 标题 --><view class="title">{{ title }}</view><!-- 右侧操作 --><view class="right-actions"><slot name="right"></slot></view></view></view>
</template><script>
export default {props: {title: {type: String,default: ''},showBack: {type: Boolean,default: true}},methods: {handleBack() {uni.navigateBack()}}
}
</script><style scoped>
.custom-nav-bar {height: var(--status-bar-height);padding-top: var(--status-bar-height);background-color: #FFFFFF;box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);position: fixed;top: 0;left: 0;right: 0;z-index: 999;
}.nav-bar-content {height: 44px;display: flex;align-items: center;padding: 0 15px;
}.back-btn {width: 24px;height: 24px;margin-right: 10px;
}.back-btn image {width: 100%;height: 100%;
}.title {flex: 1;text-align: center;font-size: 16px;font-weight: bold;
}.right-actions {width: 24px;height: 24px;margin-left: 10px;
}
</style>

在页面中使用自定义导航栏：

<template><view><custom-nav-bar title="我的页面" :show-back="true"><template #right><image src="/static/share.png" mode="aspectFit"></image></template></custom-nav-bar><!-- 页面内容需要设置padding-top避免被导航栏遮挡 --><view class="content" :style="{paddingTop: navBarHeight}">页面内容...</view></view>
</template><script>
import CustomNavBar from '@/components/custom-nav-bar.vue'export default {components: {CustomNavBar},data() {return {// 计算导航栏高度（状态栏高度 + 导航栏内容高度）navBarHeight: `calc(var(--status-bar-height) + 44px)`}}
}
</script>