数字生活小程序-文档中心

位于 app 内容区的上方，系统状态栏的下方，并且提供在一系列页面中的导航能力。

规则

可在导航栏中显示当前视图的标题。如果标题非常冗长且无法精简，可以空缺。
可在导航栏中使用 SegmentedControl 对内容进行层级划分。
避免用过多的元素填满导航栏。一般情况下，一个『返回按钮』、一个『标题』、一个『当前视图的控件』就足够了；如果已经有了 SegmentedControl ，一般只搭配一个『返回按钮』或者『当前视图的控件』。
为图标和文字控件，提供更大的点击热区。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {NavBar} from '@21cnfe/vui'  
Vue.component('NavBar', NavBar)

代码演示

NavBar 导航栏 navBars

基本用法 mode 可以修改显示模式，导航栏的内容主要通过插槽方式填充

<template>
  <NavBar @onLeftClick="onLeftClick" icon="left" mode="light">
    title
    <span slot="left">left</span>
    <span style="display:flex" slot="right">
      <div @click="search" style="margin-right:15px;"><Icon type="search"></Icon></div>
      <div @click="oparete"><Icon type="ellipsis"></Icon></div>
    </span>
  </NavBar>
</template>
<script>
export default {
  methods: {
    onLeftClick () {
      console.log('left')
    },
    search () {
      console.log('search')
    },
    oparete () {
      console.log('oparete')
    }
  }
}
</script>

API

属性	说明	类型	默认值
`mode`	模式，可选值`dark`, `light`	String	`dark`
`title`	导航栏中间标题	String	`--`
`icon`	出现在最左边的图标占位符，传入的字符串为Icon 组件里内置的某个`icon`的`type`值	String	`--`

Events

事件名称	说明	回调参数
`onLeftClick`	导航左边点击回调	`--`

Slot

属性	说明
`left`	填充导航栏左边部分
`right`	填充导航栏右边部分

1. NavBar 导航栏 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

NavBar 导航栏 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Events

Slot

NavBar 导航栏 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用