快捷導(dǎo)航

uniapp自定義導(dǎo)航欄新手保姆級(jí)教程

更新時(shí)間：2024年07月26日 10:46:43 作者：奶糖?肥晨

uniapp的頂部導(dǎo)航欄有時(shí)候不符合設(shè)計(jì)需求,我們可以自定義頂部導(dǎo)航欄,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義導(dǎo)航欄的保姆級(jí)教程,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

導(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>