Unibest 自定義導航欄模板指南
Unibest 是一個基于 uni-app 的框架，提供了強大的自定義能力。以下是關于如何自定義導航欄模板的詳細說明：

基本導航欄自定義
在 Unibest 中，你可以通過修改頁面配置文件或使用組件來自定義導航欄：

1. 通過頁面配置文件修改
json
Copy Code
// pages.json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "自定義標題",
"navigationBarBackgroundColor": "#FF0000",
"navigationBarTextStyle": "white",
"navigationStyle": "custom" // 完全自定義導航欄
}
}
]
}
2. 完全自定義導航欄組件
vue
Copy Code








{{ title }}

.custom-navbar {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
background-color: #FFFFFF;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}

.nav-title {
font-size: 16px;
font-weight: bold;
}

高級自定義功能
1. 帶搜索框的導航欄
vue
Copy Code

.search-navbar {
padding: 8px 15px;
background-color: #F8F8F8;
}

.search-container {
display: flex;
align-items: center;
background-color: #FFFFFF;
border-radius: 18px;
padding: 6px 12px;
}

.search-input {
flex: 1;
margin-left: 8px;
font-size: 14px;
}

2. 帶選項卡的導航欄
vue
Copy Code

.tab-navbar {
display: flex;
height: 44px;
background-color: #FFFFFF;
border-bottom: 1px solid #F0F0F0;
}

.tab-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #666;
}

.tab-item.active {
color: #FF0000;
font-weight: bold;
position: relative;
}

.tab-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 3px;
background-color: #FF0000;
border-radius: 2px;
}

注意事項
?適配不同平臺?：自定義導航欄在不同平臺（H5、小程序、App）的表現可能不同，需要測試調整
?狀態欄高度?：在 App 端需要考慮狀態欄高度，可以使用 uni.getSystemInfoSync() 獲取狀態欄高度
?滾動穿透?：固定定位的導航欄可能會影響頁面滾動，需要合理設置頁面 padding
?性能優化?：頻繁變化的導航欄內容可能會影響性能，應避免不必要的重渲染
通過以上方法，你可以在 Unibest 框架中靈活地自定義各種風格的導航欄，滿足不同的業務需求。

審核編輯 黃宇