【uview】将tabs组件的标签从文字修改为图标

1 篇文章 0 订阅
1 篇文章 0 订阅

先看效果:
原组件标题是文字:
在这里插入图片描述
最终效果:
标题为图标:
在这里插入图片描述

先从阿里矢图库里选择自己需要的图标,添加到项目中,然后下载项目文件。
具体参考:
https://www.uviewui.com/guide/customIcon.html
在uniapp项目的根目录创建一个common文件夹,在里面创建css文件夹,将下载好的图标项目文件解压后拷贝到css文件夹下,如图:
在这里插入图片描述
打开iconfont.css,修改路径:
在这里插入图片描述
然后将这个css文件引入到APP.vue中。
在这里插入图片描述
接着打开uview-ui/components/u-tabs目录下的u-tabs.vue文件,将第十二行的代码注释掉,添加以下代码:

在这里插入图片描述

<uni-icons :type="item[name] || item['name']" size="26" customPrefix="custom-icon"></uni-icons>

注意:customPrefix属性表示添加的图标是自定义图标。值为阿里矢量图标项目的Font Family
,根据自己的命名修改即可。
在这里插入图片描述
最后在页面使用tabs组件时,list数组中的元素name值为图标项目的font-class:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
到此效果就出来了。
成品图:
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值