NavBar 导航栏

使用指南

在 app.json 或 index.json 中引入组件

  1. "usingComponents": {
  2.   "van-nav-bar": "path/to/vant-weapp/dist/nav-bar/index"
  3. }

代码演示

基础用法

  1. <van-nav-bar
  2.   title="标题"
  3.   left-text="返回"
  4.   right-text="按钮"
  5.   left-arrow
  6.   bind:click-left="onClickLeft"
  7.   bind:click-right="onClickRight"
  8. />
  1. Page({
  2.   onClickLeft() {
  3.     wx.showToast({ title: '点击返回', icon: 'none' });
  4.   },
  5.   onClickRight() {
  6.     wx.showToast({ title: '点击按钮', icon: 'none' });
  7.   }
  8. });

高级用法

通过 slot 定制内容

  1. <van-nav-bar title="标题" left-text="返回" left-arrow>
  2.   <van-icon name="search" slot="right" />
  3. </van-nav-bar>

API

参数说明类型默认值
title标题String''
left-text左侧文案String''
right-text右侧文案String''
left-arrow是否显示左侧箭头Booleanfalse
fixed是否固定在顶部Booleanfalse
border是否显示下边框Booleantrue
z-index元素 z-indexNumber1

Slot

名称说明
title自定义标题
left自定义左侧区域内容
right自定义右侧区域内容

Event

事件名说明参数
bind:click-left点击左侧按钮时触发-
bind:click-right点击右侧按钮时触发-

外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类

更新日志

版本类型内容
0.0.1feature新增组件

原文: https://youzan.github.io/vant-weapp/#/nav-bar