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

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标签栏。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/22236.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序自定义tabBar以及图标-使用vant-weapp

小程序整合vant weapp可以看《微信小程序vant weapp安装与使用》 微信官方文档有介绍自定义tabBar 1、在小程序根目录下创建custom-tab-bar文件夹&#xff0c;并创建以下文件。&#xff08;这个是作为入口文件的&#xff09; custom-tab-bar/index.js custom-tab-bar/index.…

WeTab新标签页:浏览器主页就可以直接使用的Chat GPT

我一直觉得&#xff0c;如果能在打开浏览器的时候就能使用chatgpt&#xff0c;那可以说是再方便不过了。 刚好前段时间我发现我正在使用的WeTab新标签页刚好有了这个新功能&#xff0c;可以在新标签页上直接用gpt。 因为一些原因&#xff0c;很多人都被注册chatGPT的繁琐步骤劝…

Chat GPT使用体验,现在不会还有人没用过GPT吧?

“ChatGPT 好得吓人&#xff0c;我们离强大到危险的人工智能不远了”。 这是我们最近听到不少的一些声音&#xff0c;甚至有许多美丽国的大佬&#xff0c;联名要求停止gpt5的开发。 然而&#xff0c;尽管 ChatGPT 确实是一种相当出色的模型&#xff0c;但它也有其限制和局限性…

用后即弃的人造人

即使各种鼓励政策不断被使出&#xff0c;很多发达国家的女性&#xff0c;也不大愿意生孩子了。少子化是现代化、工业化的附赠品&#xff0c;这一点无可回避。 所以很多人都很期待用科技来造人。埃隆马斯克&#xff08;Elon Musk&#xff09;等人提出的“人造子宫”方案&#xf…

Android程序员惨遭社会毒打,如何快准狠的应对下次危机?

一、程序员现状 今年年初&#xff0c;我同行朋友的小公司辞退了10多个程序员。 近3个月过去了&#xff0c;大概一半的人找不到合适工作。大家聊起时正在感慨这两年好多行业都不景气&#xff0c;朋友说&#xff0c;他的前同事们不少非科班出身&#xff0c;半路参加培训机构后就…

波士顿动力新年炸场!人形机器人飞身转投工具包,最后体操式落地把人类给整不会了...

杨净 丰色 发自 凹非寺量子位 | 公众号 QbitAI 波士顿动力Atlas&#xff0c;又来整活炸场了&#xff01; 不是跑酷不是跳舞&#xff0c;而是去工地老实上班当助手&#xff0c;结果把人类给整不会了。 当高架上工人需要工具包&#xff0c;Atlas二话不说完成搭桥、爬楼等一系列动…

“Google 之母”诞生 | 历史上的今天

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2023 年 7 月 5 日&#xff0c;在 1994 年的今天&#xff0c;在半导体大战中&#xff0c;英特尔宣布降价以阻止竞争对手&#xff1b;当天&#xff0c;英特尔公司宣布了其…

重磅!微软推出HuggingGPT:所有HuggingFace的模型都可以被ChatGPT随意调用!

编&#xff5c;桃子 Britta 源&#xff5c;新智元 「贾维斯」已来&#xff01;微软亚研院和浙大推出了一个大模型协作系统HuggingGPT&#xff0c;让ChatGPT协调HF社区模型&#xff0c;处理各种多模态任务能力超强。 ChatGPT引爆的AI热潮也「烧到了」金融圈。 近来&#xff0c;彭…

chatGPT联结hugging face了

文章目录 ChatGPT自己选模型&#xff01;浙大微软亚研院新论文&#xff0c;HuggingGPT项目开源HuggingGPT搭桥四步工作流程多模态能力&#xff0c;有了 ChatGPT自己选模型&#xff01;浙大微软亚研院新论文&#xff0c;HuggingGPT项目开源 原文链接&#xff1a;https://mbd.ba…

答题小程序团队多人pk答题赛功能详解

针对目前答题小程序的趣味性、参与性特此开发了答题小程序团队多人赛&#xff0c;具体介绍如下&#xff1a; 一、 邀请制团队多人赛 2V2模式&#xff1a;2V2模式顾名思义&#xff0c;即2个人对另外的2个人进行团队pk答题。操作流程为&#xff1a;进入团队赛邀请制&#xff0c;邀…

活动星投票技能创意大赛网络评选微信的投票方式线上免费投票

“技能创意大赛”网络评选投票_建立投票链接_作品投票小程序_扫码投票制作方法 现在来说&#xff0c;公司、企业、学校更多的想借助短视频推广自己。 通过微信投票小程序&#xff0c;网友们就可以通过手机拍视频上传视频参加活动&#xff0c;而短视频微信投票评选活动既可以给用…

【2018国赛线上比赛】知识问答题真题演练第一波

1、操作系统为了防止应用程序在不可执行区域中运行代码提供的解决方案是什么&#xff1f;( A ) A、数据执行保护 B、地址随机化保护 C、只读保护 D、访问违例异常 2、Stack Canary 的作用是什么&#xff1f;( A ) A、缓解栈越界写入 B、缓解栈越界读取 C、缓解堆越界写入 D、缓…

基于闻达(wenda+chatGLM-6B),构建自己的知识库小助手

目录 安装miniconda 拉取仓库 使用内置python 安装依赖 上传模型 克隆及下载 text2vec-large-chinese 修改配置 上传知识库&#xff08;txt文件&#xff09; 处理txt数据 启动服务 测试 ChatGLM-6B是清华团队智谱AI开发的&#xff0c;一个开源的、支持中英双语的对话…

用离散数学知识对AI最难替代的职业进行数学建模,推导证明出最难被AI替代的职业是什么

摘要&#xff1a; 本文基于离散数学的知识&#xff0c;对人类智力劳动的职业进行数学建模&#xff0c;并推导出最难被AI替代的职业。通过对职业的分析&#xff0c;本文认为&#xff0c;应该运用离散数学中的图论知识对AI替代各种人类职业的难易进行数学建模&#xff0c;从中寻找…

与2017年度两位图灵奖得主的虚拟对话

【新一届图灵奖即将揭晓&#xff0c;在此与大家分享撰写的2017年度两位图灵奖得主的故事。本文于2018年3月28日完稿&#xff0c;发表于《中国计算机学会通讯》2018年第4期。】 2017年度的计算机领域最高奖“图灵奖”终于揭晓——斯坦福大学的约翰●轩尼诗&#xff08;John Henn…

这把小刀怎么用——详解Knife4j框架

目录 介绍 使用步骤 1.在maven中添加依赖 2.添加其配置类&#xff0c;可以放在项目其他框架的配置类包中 3.application.properties中添加配置 介绍 Knife4j是为Java MVC框架集成Swagger生成在线Api文档的增强解决方案,其前身是swagger-bootstrap-ui&#xff0c;此框架还有调…

Emlog插件小刀娱乐网同款文章顶踩源码

介绍&#xff1a; Emlog小刀娱乐网同款顶踩插件免费发布 前些天看到小刀娱乐网的文章页面有了一些变化&#xff0c;那就是增加了一个有价值/无价值的顶踩按钮。 样式也是非常的好看 再加上两个表情包是非常的有趣。 网盘下载地址&#xff1a; http://kekewl.org/HGAmnmx7pAC0…

一把小刀,直插 class 文件的小心脏

大家好&#xff0c;我是二哥呀&#xff0c;假期结束了&#xff0c;学起来吧&#xff01; 今天我拿了一把小刀&#xff0c;准备解剖一下 Java 的 class 文件。 CS 的世界里流行着这么一句话&#xff0c;“计算机科学领域的任何问题都可以通过增加一个中间层来解决”。对于 Jav…

emlog仿小刀模板

简介&#xff1a; 此模板是模仿小刀的模板&#xff0c;修改首页左广告图下内容&#xff0c;比之前更实用。修复无法搜索以及标签问题。删除文章页千篇一律的免责声明。添加右侧投稿和top悬浮标&#xff0c;可以和之前的top共存。友链中的部分链接可以在module.php修改。最近更…