---

導(dǎo)文

在 UniApp 中，自定義導(dǎo)航欄通常涉及到隱藏默認(rèn)的導(dǎo)航欄，并在頁面頂部添加自定義的視圖組件來模擬導(dǎo)航欄的功能。

隱藏默認(rèn)導(dǎo)航欄：

全局隱藏

在你的頁面 pages.json 配置中，為相應(yīng)的頁面設(shè)置 navigationStyle 為 custom，這將隱藏默認(rèn)的導(dǎo)航欄。

  	"globalStyle": {"navigationStyle": "custom"},

當(dāng)前頁面隱藏

   {"pages": [{"path": "pages/index/index","style": {"navigationStyle": "custom"}},// ... 其他頁面配置]}

添加自定義導(dǎo)航欄視圖：

手寫導(dǎo)航欄

在你的頁面 .vue 文件中，使用 <view> 或 <template> 標(biāo)簽在頁面頂部添加自定義的導(dǎo)航欄視圖。這可以包括標(biāo)題文本、返回按鈕、搜索框等。

   <template><view class="container"><view class="custom-nav-bar"><text class="back-button" @click="goBack">返回</text><text class="title">標(biāo)題</text><!-- 這里可以添加其他導(dǎo)航欄元素 --></view><!-- 頁面內(nèi)容 --><view class="content"><!-- ... --></view></view></template><script>export default {methods: {goBack() {uni.navigateBack();},// ... 其他方法}};</script><style>.custom-nav-bar {display: flex;justify-content: space-between;align-items: center;height: 44px; /* 根據(jù)需要調(diào)整高度 */background-color: #fff; /* 導(dǎo)航欄背景色 *//* 其他樣式屬性 */}.back-button {/* 返回按鈕樣式 */}.title {/* 標(biāo)題樣式 */}/* 其他樣式 */</style>

組件導(dǎo)航欄

使用uinapp原生的組件

<template><view class="checkIn"><view class="checkIn-date"><uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"title="自定義導(dǎo)航欄" @clickLeft="back" /></view><view class="checkIn-main"><uni-card title="標(biāo)題文字" thumbnail="" extra="額外信息" note="Tips">內(nèi)容主體，可自定義內(nèi)容及樣式</uni-card></view></view>
</template><script>export default {components: {},data() {return {}},onReady() {},methods: {}
}
</script><style></style>

官網(wǎng)詳細(xì)配置》》

您好，我是肥晨。
歡迎關(guān)注我獲取前端學(xué)習(xí)資源，日常分享技術(shù)變革，生存法則；行業(yè)內(nèi)幕，洞察先機(jī)。