vant菜单,vant底部导航栏,vant选项卡,vant 图标,vant自定义图标,vant顶部导航栏
Vant4 是一个基于 Vue.js 的移动端 UI 组件库，其中 Tabbar 标签栏是其中的一个组件。Tabbar 可以帮助开发者在移动端应用中实现底部导航栏的功能。

Tabbar 组件提供了多个选项卡，每个选项卡包含一个图标和一个标签文字，用户可以通过点击不同的选项卡来切换应用程序的不同页面。此外，Tabbar 还支持设置默认选项卡、自定义选项卡样式等功能。

以下是一个简单的 Vant4 Tabbar 标签栏的例子：

html
<template>
<div>
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">首页</van-tabbar-item>
<van-tabbar-item icon="search" :dot="true">搜索</van-tabbar-item>
<van-tabbar-item icon="friends-o">朋友</van-tabbar-item>
<van-tabbar-item icon="setting-o">设置</van-tabbar-item>
</van-tabbar>
</div>
</template>

<script>
export default {
data() {
return {
active: 0 // 默认选中第一个选项卡
};
}
};
</script>


在上面的代码中，我们使用了 Vant4 中的 van-tabbar 和 van-tabbar-item 组件来创建一个包含四个选项卡的标签栏。其中，v-model 指令绑定了当前选中的选项卡的索引值（从 0 开始计数）。点击不同的选项卡会触发 active 值的更新，从而切换显示不同的页面。