程序员的资源宝库

网站首页 > gitee 正文

将iconfont图标引入到vant的Tabbar标签栏里边

sanyeah 2024-03-29 15:20:37 gitee 7 ℃ 0 评论

vant的Tabbar标签栏https://youzan.github.io/vant/#/zh-CN/tabbar

 

在app开发中,这个必不可少,上一张讲了怎么引入iconfont图标,现在就将iconfont图标引入到tabbar标签栏里边,看着vant提供的图标,必将有点丑啊23333,接下来就是引入方法:

1. 首先引入tabbar

 

2. 以基础代码为例

 

 

我现在就把这个第一个图标换掉,换成iconfont图标

第一个图标标签为<van-tabbar-item icon="home-o">标签</van-tabbar-item>

把这行代码换成如下:

<van-tabbar-item>

    <van-icon class="iconfont" class-prefix='icon' slot="icon" slot-scope="props" :name='props.active ? icon.home_active:icon.home_normal'></van-icon>

    <span>home</span>

</van-tabbar-item>

 

相应的,js代码为:

 

slot-scope="props" 这个属性就是用来判断图标是不是被选中的,

 

这是官方文档的原话。

:name='props.active ? icon.home_active:icon.home_normal' 这行代码的意思就是 

当 props.active 为 true,说明处于选中状态,此时会调用名称 icon.home_active,如果不在选中状态,那么会调用名称  icon.home_normal,通过 查看js代码,可以知道,icon.home_active 就是 home,icon.home_normal 就是 homefill

之所以是这个名称,那是因为

 

可以看见iconfont矢量图的名称就是home 和 homefill,这可不是我随便取的,要看看你想调用的iconfont图标名称是啥

于是,:name='props.active ? icon.home_active:icon.home_normal 还可以这么理解:

当处于选中状态的时候,调用 homefill图标 ,不是选中状态的是,调用home图标

接下来看看效果:

处于选中状态的时候,

 

不是选中状态的时候,

 

这么一来就可以实现 iconfont图标的自由切换了,随心所欲,可能有些小伙伴想要改变颜色,这个其实很简单,官方文档就有修改颜色的方法:https://youzan.github.io/vant/#/zh-CN/tabbar

 

我把处于选中状态的时候颜色变成 hotpink,一个很骚的颜色

 

这就是效果图,好骚啊23333

 

方法分享就到这里了,其实如果想有实际应用的话,应该要加上路由模式,这样一个Tabbar标签栏才算是一个比较完美的Tabbar标签栏。
————————————————
版权声明:本文为CSDN博主「傻她你呀」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41672008/article/details/91040018

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表