Tabbar 标签栏

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/tabbar

本质就是底部导航, Tab 导航. 涉及两个组件: Tabar 和 TabbarItem

该组件默认会固定在页面底部. 绑定也默认使用索引, 如果 TabbarItem 定义了 name 也可以使用 name 来绑定.

image-20240117175623210

基本用法:

<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

const active = ref(0)

image-20240117175657145

基本用法与 Tab 标签页类似. 涉及到:

  • 默认匹配索引, 也可以按照名称匹配 (使用 name 属性).
  • 支持徽标提示 (使用 dot 或 badge 属性).
  • 自定义图标 (使用 icon 插槽).
  • 自定义颜色 (使用 active-color 以及 inactive-color).
  • 监听切换事件, 使用 change 事件.
  • 路由模式. Tabbar 使用 route 属性, TabbarItem 中使用 to 配合 replace 实现跳转.

Tabbar 常用属性

  • v-model 绑定数据
  • fixed 是否固定与页面底部, 默认为 true.
  • placeholder 是否创建等高占位元素.
  • safe-area-inset-bottom 是否开启底部安全区, fixed 模式下默认开启.
  • before-change 切换前触发, 返回 false 不触发. 支持 Promise

TabbarItem 常用属性

  • name 用于定义绑定名.
  • icon 图标名
  • dot, badge 点或徽标
  • to, url, replace 应用于导航模式.
Last Updated:
Contributors: jk