如何使用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 对象中的序号，然后根据当前是否选中来判断返回对应的名称。文章来源：https://www.toymoban.com/news/detail-792097.html
当我们想要使用的时候只需要按照如下图的方式就可以了。
如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下文章来源地址https://www.toymoban.com/news/detail-792097.html
到了这里，关于如何使用vant配置Tabbar的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
