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'
    />

自定义标题内容

注意 title 属性须为空

  1. <AtNavBar
    onClickRgIconSt={this.handleClick}
    onClickRgIconNd={this.handleClick}
    onClickLeftIcon={this.handleClick}
    color='#000'
    leftText='返回'
    rightFirstIconType='bullet-list'
    rightSecondIconType='user'
    >
    <View>Taro UI</View>
    </AtNavBar>

参数

参数说明类型可选值默认值
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