navigation-bar

页面导航条配置节点，用于指定导航栏的一些属性。只能是 page-meta 组件内的第一个节点，需要配合它一同使用。

通过这个节点可以获得类似于调用 wx.setNavigationBarTitle wx.setNavigationBarColor 等接口调用的效果。

效果展示

示例代码

WXML

<page-meta background-color="{{bgColor}}" background-color-top="{{bgColorTop}}" background-color-bottom="{{bgColorBottom}}" scroll-top="{{scrollTop}}" page-style="color: green" bindscroll="pageScroll" bindresize="pageResize" bindscrolldone="pageScrollDone">
    <navigation-bar title="{{nbTitle}}" front-color="{{nbFrontColor}}" background-color="{{nbBackgroundColor}}" />
</page-meta>
<view>以下是页面正文</view>
<button bindtap="scrollTo200">点击跳到 200rpx 处</button>
<view class="intro">
    <text>
    这个页面文字是绿色的，而且要长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    长
    </text>
</view>

JS

const app = getApp()

Page({
  data: {
    bgTextStyle: 'dark',
    scrollTop: '100',
    bgColor: '#ff0000',
    bgColorTop: '#00ff00',
    bgColorBottom: '#0000ff',
    nbTitle: '原标题',
    nbLoading: false,
    nbFrontColor: '#000000',
    nbBackgroundColor: '#ffffff',
  },
  onLoad() {
  },
  scrollTo200: function () {
    this.setData({
      scrollTop: '200rpx'
    })
  },
  pageScroll: function (e) {
    console.log('scroll', e.detail)
  },
  pageResize: function (e) {
    console.log('resize', e.detail)
  },
  pageScrollDone: function (e) {
    console.log('scrolldone', e.detail)
    this.setData({
      scrollTop: e.detail.scrollTop
    })
  },
  onPullDownRefresh() { }
})

WXSS

.intro {
  margin: 30px;
  text-align: center;
}

API

属性 类型 默认值 必填 说明
title string 否 导航条标题
front-color string 否 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
background-color string 否 导航条背景颜色值，有效值为十六进制颜色