1. 在你的组件中引入 Tabbar 组件：
<template>
<vant-tabbar v-model="activeTab" @change="onChange">
<vant-tabbar-item icon="home-o" text="首页" />
<vant-tabbar-item icon="search" text="搜索" />
<!-- 可以有多个 vant-tabbar-item 标签，每个标签对应一个页面 -->
<!-- 更多标签... -->
</vant-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
components: {
[Tabbar.name]: Tabbar,
[TabbarItem.name]: TabbarItem,
},
data() {
return {
activeTab: 0, // 当前激活的标签索引，从0开始
};
},
methods: {
onChange(index) {
// 处理标签切换的逻辑
console.log('当前标签索引:', index);
},
},
};
</script>
在这个示例中：
- v-model="activeTab" 用于双向绑定当前激活的标签索引。
- @change 事件会在标签切换时触发，你可以在 onChange 方法中处理标签切换的逻辑。
- 每个 vant-tabbar-item 标签内可以设置图标和文本，分别表示导航项的图标和文本。
你可以根据实际需求添加其他属性或者定制样式。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5768/Vant