使用vant的 van-tabbar组件的一点心得

最新推荐文章于 2024-09-19 20:21:41 发布

妮子果果

最新推荐文章于 2024-09-19 20:21:41 发布

阅读量8.1k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44446394/article/details/109740006

版权

本文记录了使用 vant 框架中的 van-tabbar 组件实现自定义图标的过程，包括通过 icon 插槽和条件判断展示选中状态的方法，并展示了相关的 Vue 代码示例。

摘要由CSDN通过智能技术生成

使用vant的 van-tabbar组件的一点心得

以下是官方文档的demo，原谅作为新手的我看了半天没搞懂，后来，经过多次尝试，终于做出来了。记录一下。
Tabbar 标签栏
自定义图标
通过 icon 插槽自定义图标，可以通过 slot-scope 判断标签是否选中。

自定义

我的项目：

<van-tabbar-item
v-for="(item, index) in tabbars"
:key=“index”
@click=“tab(index, item.name)”
>
{{ item.title }}

export default {
data() {
return {
active: 0,
currIndex: 0,
tabbars: [
{
title: ‘首页’,
normal: require(’…/…/assets/images/index.png’),
active: require(’…/…/assets/images/index-yes.png’),
name: ‘/sp_trunk/qa/getDynamicQAs’
},
{
title: ‘提问’,
normal: require(’…/…/assets/images/tiwen-no.png’),
active: require(’…/…/assets/images/tiwen.png’),
name: ‘/AskQuestions’
},
{
title: ‘快问’,
normal: require(’…/…/assets/images/kuaiwen.png’),
active: require(’…/…/assets/images/kuaiwen.png’),
name: ‘/QuickMain’
},
{
title: ‘消息’,
normal: require(’…/…/assets/images/xiaoxi.png’),
active: require(’…/…/assets/images/xiaoxi1.png’),
name: ‘/sp_trunk/chat/getUserNews’
},
{
// name: ‘mine’,
title: ‘我的’,
normal: require(’…/…/assets/images/wode.png’),
active: require(’…/…/assets/images/wode1.png’),
name: ‘/mycontent’
}
]
}
},
methods: {
tab(index, val) {
this.currIndex = index
this.$router.push(val)
}
}