微信小程序導航 navigation-bar

functional-page-navigator

基礎庫 2.9.0 開始支持，低版本需做兼容處理。

頁面導航條配置節(jié)點，用于指定導航欄的一些屬性。只能是 page-meta 組件內的第一個節(jié)點，需要配合它一同使用。

通過這個節(jié)點可以獲得類似于調用 wx.setNavigationBarTitle wx.setNavigationBarColor 等接口調用的效果。

示例代碼

<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',
    })
  }
})