导航栏组件

navigation-bar 是一个页面导航条配置组件，允许开发者为页面设置导航栏的标题、图标、背景颜色等属性。该组件需要配合 page-meta 一同使用，作为 page-meta 内的第一个节点，来设置和控制页面的导航条属性。

1. 什么是 navigation-bar 组件？

navigation-bar 组件用于配置页面顶部的导航条，可以设置标题、图标、背景颜色以及前景色等多种属性。该组件可以与 page-meta 配合使用，从而为页面提供导航栏的动态配置能力。开发者可以通过该组件实现与页面内容相匹配的导航栏风格，并可根据不同平台的差异进行定制化配置。

使用场景

• 设置页面标题：通过 navigation-bar 设置页面的标题、图标、颜色等属性。
• 导航栏风格配置：根据应用风格设置导航栏的背景颜色、前景颜色及模糊效果等。
• 动态导航栏：通过数据绑定动态设置导航栏的属性，如加载状态、动画效果等。

2. navigation-bar 组件的常用属性

navigation-bar 提供了丰富的属性用于配置导航条的显示方式及行为。以下是常用属性的详细说明及使用示例：

属性	类型	默认值	说明	平台差异说明
title	String		导航条的标题	微信基础库 2.9.0+、App、H5
title-icon	String		导航条标题图标路径，仅支持本地路径	App 2.6.7+
title-icon-radius	String	无圆角	设置标题图标的圆角	App 2.6.7+
subtitle-text	String		副标题文字内容	App 2.6.7+
subtitle-color	String		副标题文字颜色	App 2.6.7+
loading	Boolean	false	是否在导航条显示 loading 加载提示	微信基础库 2.9.0+
front-color	String		导航条前景颜色，包括按钮、标题等颜色，仅支持 #ffffff 和 #000000	微信基础库 2.9.0+
background-color	String		导航条背景颜色	微信基础库 2.9.0+
color-animation-duration	Number	0	改变导航栏颜色时的动画时长	微信基础库 2.9.0+
color-animation-timing-func	String	"linear"	导航栏颜色变化时的动画效果	微信基础库 2.9.0+

2.1 设置导航栏标题与图标

• 说明：通过 title 和 title-icon 设置导航栏的标题和图标。
• 类型：String
• 默认值：无

<template>
  <page-meta>
    <!-- 设置导航栏标题和图标 -->
    <navigation-bar
      :title="nbTitle"
      :title-icon="titleIcon"
      :title-icon-radius="titleIconRadius"
    />
  </page-meta>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const nbTitle = ref('页面标题');  // 设置导航栏标题
    const titleIcon = ref('/static/logo.png');  // 设置导航栏标题图标
    const titleIconRadius = ref('20px');  // 设置图标圆角

    return { nbTitle, titleIcon, titleIconRadius };
  }
}
</script>

2.2 设置导航栏加载状态与前景色

• 说明：通过 loading 属性控制导航栏的加载状态，并通过 front-color 设置导航栏的前景颜色。
• 类型：Boolean、String
• 默认值：loading: false，front-color: #000000

<template>
  <page-meta>
    <!-- 设置导航栏加载状态和前景色 -->
    <navigation-bar
      :loading="nbLoading"
      :front-color="nbFrontColor"
    />
  </page-meta>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const nbLoading = ref(true);  // 导航栏显示 loading 状态
    const nbFrontColor = ref('#ffffff');  // 导航栏前景色设置为白色

    return { nbLoading, nbFrontColor };
  }
}
</script>

2.3 设置导航栏背景颜色与颜色动画

• 说明：通过 background-color 设置导航栏的背景颜色，并通过 color-animation-duration 和 color-animation-timing-func 实现颜色变化动画。
• 类型：String、Number
• 默认值：background-color: ""，color-animation-duration: 0

<template>
  <page-meta>
    <!-- 设置导航栏背景颜色和动画效果 -->
    <navigation-bar
      :background-color="nbBackgroundColor"
      :color-animation-duration="colorAnimationDuration"
      color-animation-timing-func="easeIn"
    />
  </page-meta>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const nbBackgroundColor = ref('#00ff00');  // 设置导航栏背景颜色为绿色
    const colorAnimationDuration = ref(2000);  // 设置颜色变化动画时长为 2 秒

    return { nbBackgroundColor, colorAnimationDuration };
  }
}
</script>

3. 完整导航栏配置

以下案例展示了如何使用 navigation-bar 组件设置标题、图标、前景色、背景色、加载状态及颜色动画等完整配置。

<template>
  <page-meta>
    <navigation-bar
      :title="nbTitle"
      :title-icon="titleIcon"
      :title-icon-radius="titleIconRadius"
      :subtitle-text="subtitleText"
      :subtitle-color="nbFrontColor"
      :loading="nbLoading"
      :front-color="nbFrontColor"
      :background-color="nbBackgroundColor"
      :color-animation-duration="colorAnimationDuration"
      color-animation-timing-func="easeIn"
    />
  </page-meta>
  <view class="content"></view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const nbTitle = ref('标题');  // 设置导航栏标题
    const titleIcon = ref('/static/logo.png');  // 设置导航栏图标
    const titleIconRadius = ref('20px');  // 设置图标圆角
    const subtitleText = ref('副标题');  // 设置导航栏副标题
    const nbLoading = ref(false);  // 设置导航栏加载状态
    const nbFrontColor = ref('#000000');  // 设置前景颜色
    const nbBackgroundColor = ref('#ffffff');  // 设置背景颜色
    const colorAnimationDuration = ref(2000);  // 设置颜色变化动画时长为 2 秒

    return {
      nbTitle,
      titleIcon,
      titleIconRadius,
      subtitleText,
      nbLoading,
      nbFrontColor,
      nbBackgroundColor,
      colorAnimationDuration
    };
  }
}
</script>