NavBar 导航栏

导航栏组件，主要用于头部导航。

使用指南

在 Taro 文件中引入组件

  1. import { AtNavBar } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

  1. @import "~taro-ui/dist/style/components/nav-bar.scss";
    @import "~taro-ui/dist/style/components/icon.scss";

一般用法

  1. <AtNavBar
      onClickRgIconSt={this.handleClick}
      onClickRgIconNd={this.handleClick}
      onClickLeftIcon={this.handleClick}
      color='#000'
      title='NavBar 导航栏示例'
      leftText='返回'
      rightFirstIconType='bullet-list'
      rightSecondIconType='user'
    />

参数

参数说明类型可选值默认值
color链接文字跟图标颜色，不包括标题String-#6190E8
fixed是否固定顶部Boolean-false
border是否显示下划线(v1.4.0 新增)Boolean-true
leftIconType左边图标类型，图标类型请看AtIcon文档String | Object-'chevron-left'
leftText左边文字String--
title标题文字String--
rightFirstIconType从右到左，第一个图标类型，图标类型请看AtIcon文档String | Object--
rightSecondIconType从右到左第二个图标类型，图标类型请看AtIcon文档String | Object--

事件

事件名称说明返回参数
onClickLeftIcon左边第一个图标类型点击事件-
onClickRgIconSt从右到左第一个图标类型点击事件-
onClickRgIconNd从右到左第二个图标类型点击事件-

NavBar导航栏 - 图1