如何使用vant配置Tabbar
本文讲解如何通过vant配置Tabber功能。
首先肯定是通过vant官网找到Tabber
然后我们创建一个components文件夹，再到里面创建一个common文件夹，然后创建TabbarView.vue组件
内容具体如下：
<template> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o" :active-icon="activeIcon('home')" to="/index">首页</van-tabbar-item> <van-tabbar-item icon="search" :active-icon="activeIcon('search')" to="/point">知识点</van-tabbar-item> <van-tabbar-item icon="friends-o" :active-icon="activeIcon('friends')" to="/exam">考试</van-tabbar-item> <van-tabbar-item icon="setting-o" :active-icon="activeIcon('setting')" to="/my">我的</van-tabbar-item> </van-tabbar> </template> <script> export default { data() { return { active: 0, icons: { home: { normal: 'home-o', active: 'home' }, search: { normal: 'search', active: 'search' }, friends: { normal: 'friends-o', active: 'friends' }, setting: { normal: 'setting-o', active: 'setting' }, }, }; }, methods: { activeIcon(icon) { return this.active === Object.keys(this.icons).indexOf(icon) ? this.icons[icon].active : this.icons[icon].normal; }, }, }; </script>
代码详细解释：
需要搭配router下面的index.js使用
- HTML 部分
<template> <van-tabbar v-model="active"> <!-- 第一项：图标为 home-o（未选中时的图标）， 选中时的图标为“home”，跳转至“/index”路径 --> <van-tabbar-item icon="home-o" :active-icon="activeIcon('home')" to="/index">首页</van-tabbar-item> <!-- 第二项：图标为 search（未选中时和选中时都是同一个图标）， 跳转至“/point”路径 --> <van-tabbar-item icon="search" :active-icon="activeIcon('search')" to="/point">知识点</van-tabbar-item> <!-- 第三项：图标为 friends-o（未选中时的图标）， 选中时的图标为“friends”，跳转至“/exam”路径 --> <van-tabbar-item icon="friends-o" :active-icon="activeIcon('friends')" to="/exam">考试</van-tabbar-item> <!-- 第四项：图标为 setting-o（未选中时的图标）， 选中时的图标为“setting”，跳转至“/my”路径 --> <van-tabbar-item icon="setting-o" :active-icon="activeIcon('setting')" to="/my">我的</van-tabbar-item> </van-tabbar> </template>
- JavaScript 部分
<script> export default { // 组件内部的数据 data() { return { // 当前选中的选项卡序号，默认为第一个（序号从0开始） active: 0, // 定义各个图标在选中和未选中状态下应该显示的图标名称 icons: { home: { normal: 'home-o', active: 'home' }, search: { normal: 'search', active: 'search' }, friends: { normal: 'friends-o', active: 'friends' }, setting: { normal: 'setting-o', active: 'setting' }, }, }; }, // 定义组件内部的方法 methods: { // 返回指定图标在当前选中状态下应该显示的图标名称 activeIcon(icon) { // 获取当前选中的选项卡序号 const activeIndex = Object.keys(this.icons).indexOf(icon); // 判断当前图标是否被选中，是则返回对应的选中状态的图标名称，否则返回未选中状态的图标名称 return this.active === activeIndex ? this.icons[icon].active : this.icons[icon].normal; }, }, }; </script>
整个代码部分使用了 Vue.js 的单文件组件结构，在 template 标签中定义了该组件的 HTML 内容，在 script 标签中定义了该组件的 JavaScript 内容。
其中，组件中包含了四个选项卡，并通过 v-model="active" 将当前选中的选项卡序号绑定到 active 属性，实现了选项卡的切换。
组件中还定义了一个方法 activeIcon(icon)，该方法根据当前选中状态返回给定图标的相应名称。其中 icons 对象保存了每个图标在不同状态下应该当前显示名称。在该方法中，先获取当前图标在 icons 对象中的序号，然后根据当前是否选中来判断返回对应的名称。
当我们想要使用的时候只需要按照如下图的方式就可以了。
如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下
