May 18, 2021 WeChat Mini Program Development Document
Base library 2.9.0 starts to support, and low versions need to be compatible.
The page navigation bar configures nodes to specify some properties of the navigation bar. It can only be the first node within the page-meta component and needs to be used with it.
This node gives the effect of calling interfaces such as wx.setNavigationBarTitle wx.setNavigationBarColor.
| Property | Type | The default | Required | Description | The lowest version |
|---|---|---|---|---|---|
| title | string | Whether | The title of the navigation bar | 2.9.0 | |
| loading | boolean | false | Whether | Whether to display a loading prompt in the navigation bar | 2.9.0 |
| front-color | string | Whether |
Navigation bar foreground color values, including buttons, titles, status bar colors,
#ffffff
and
#000000
|
2.9.0 | |
| background-color | string | Whether | The background color value of the navigation bar, with a valid value of heteens | 2.9.0 | |
| color-animation-duration | number | 0 | Whether |
Animation length when changing navigation bar color, default to
0
no animation)
|
2.9.0 |
| color-animation-timing-func | number | "linear" | Whether |
The animation mode when changing the color of the navigation bar
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: '新标题',
nbLoading: true,
nbFrontColor: '#ffffff',
nbBackgroundColor: '#000000',
})
}
})