# navigation-bar
基礎(chǔ)庫 2.9.0 開始支持，低版本需做兼容處理。
微信 Windows 版：支持
微信 Mac 版：支持
微信 鴻蒙 OS 版：支持
渲染框架支持情況：WebView
# 功能描述
頁面導(dǎo)航條配置節(jié)點(diǎn)，用于指定導(dǎo)航欄的一些屬性。只能是 page-meta 組件內(nèi)的第一個(gè)節(jié)點(diǎn)，需要配合它一同使用。
通過這個(gè)節(jié)點(diǎn)可以獲得類似于調(diào)用 wx.setNavigationBarTitle wx.setNavigationBarColor 等接口調(diào)用的效果。
# 屬性說明
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| title | string | 否 | 導(dǎo)航條標(biāo)題 | 2.9.0 | |
| loading | boolean | false | 否 | 是否在導(dǎo)航條顯示 loading 加載提示 | 2.9.0 |
| front-color | string | 否 | 導(dǎo)航條前景顏色值，包括按鈕、標(biāo)題、狀態(tài)欄的顏色，僅支持 #ffffff 和 #000000 | 2.9.0 | |
| background-color | string | 否 | 導(dǎo)航條背景顏色值，有效值為十六進(jìn)制顏色 | 2.9.0 | |
| color-animation-duration | number | 0 | 否 | 改變導(dǎo)航欄顏色時(shí)的動(dòng)畫時(shí)長(zhǎng)，默認(rèn)為 0 （即沒有動(dòng)畫效果） | 2.9.0 |
| color-animation-timing-func | string | "linear" | 否 | 改變導(dǎo)航欄顏色時(shí)的動(dòng)畫方式，支持 linear 、 easeIn 、 easeOut 和 easeInOut | 2.9.0 |
# 示例代碼
<page-meta>
<navigation-bar
title="{{nbTitle}}"
loading="{{nbLoading}}"
front-color="{{nbFrontColor}}"
background-color="{{nbBackgroundColor}}"
color-animation-duration="2000"
color-animation-timing-func="easeIn"
/>
</page-meta>
Page({
data: {
nbFrontColor: '#000000',
nbBackgroundColor: '#ffffff',
},
onLoad() {
this.setData({
nbTitle: '新標(biāo)題',
nbLoading: true,
nbFrontColor: '#ffffff',
nbBackgroundColor: '#000000',
})
}
})