qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

NavBar 导航栏


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

使用指南

在 Taro 文件中引入组件

import { AtNavBar } from 'taro-ui-vue3'

组件依赖的样式文件(仅按需引用时需要)

@import "taro-ui-vue3/dist/style/components/nav-bar.scss";

一般用法

<AtNavBar
  @clickRgIconSt="handleClick"
  @clickRgIconNd="handleClick"
  @clickLeftIcon="handleClick"
  color='#000'
  title='NavBar 导航栏示例'
  leftText='返回'
  rightFirstIconType='bullet-list'
  rightSecondIconType='user'
/>

自定义标题内容

注意 title 属性须为空

<AtNavBar
  @clickRgIconSt="handleClick"
  @clickRgIconNd="handleClick"
  @clickLeftIcon="handleClick"
  color='#000'
  leftText='返回'
  rightFirstIconType='bullet-list'
  rightSecondIconType='user'
>
  <view>Taro UI</view>
</AtNavBar>

参数

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

事件

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