Vue - 案例 - TabBar 思路 + 实现
发布日期:2021-06-30 17:03:51
浏览次数:2
分类:技术文章
本文共 677 字,大约阅读时间需要 2 分钟。
-
代码:
备份: -
视频:
文章目录
# 效果
不单只一个项目可用,其他项目均可用
# 思路
如果在下方有一个单独的 TabBar
组件,你如何封装
- 自定义
TabBar
组件,在APP
中使用 - 让
TabBar
出于底部,并且设置相关的样式
TabBar
中显示的内容由外界决定
- 定义插槽
flex
布局平分TabBar
自定义 TabBarItem
,可以传入 图片和文字
- 定义
TabBarItem
,并且定义两个插槽:图片、文字。 - 给两个插槽外层包装
div
,用于设置样式。 - 填充插槽,实现底部
TabBar
的效果
传入 高亮图片
- 定义另外一个插槽,插入
active-icon
的数据 - 定义一个变量
isActive
,通过v-show
来决定是否显示对应的icon
TabBarItem
绑定路由数据
- 安装路由:
npm install vue-router —save
- 完成
router/index.js
的内容,以及创建对应的组件 main.js
中注册router
APP
中加入<router-view>
组件
点击 item
跳转到对应路由,并且动态决定 isActive
- 监听
item
的点击,通过this.$router.replace()
替换路由路径 - 通过
this.$route.path.indexOf(this.link) !== -1
来判断是否是active
动态计算 active
样式
- 封装新的计算属性:
this.isActive ? {‘color’: ‘red’} : {}
# 代码
转载地址:https://lawsssscat.blog.csdn.net/article/details/104685836 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年05月02日 14时13分10秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
COMP7404 Machine Learing——ROC
2019-04-30
Python量子计算qiskit
2019-04-30
Python的多线程不是真的多线程(GIL全局解释器锁)
2019-04-30
Python手动读取MNIST数据集
2019-04-30
Python手动读取CIFAR-10数据集
2019-04-30
Pytorch(十一) —— 分布式(多GPU)训练
2019-04-30
Deeplab v3
2019-04-30
NLP 之 Perplexity困惑度
2019-04-30
tensor/矩阵/图片等更换通道,调整size
2019-04-30
本地和colab 中 改变tensorflow的版本
2019-04-30
Camera-ready ddl
2019-04-30
CUB-200鸟类数据集
2019-04-30
Python反射机制
2019-04-30
YAPF —— Python代码格式化工具
2019-04-30
UGC 用户产生内容
2019-04-30
ranger
2019-04-30
slurm
2019-04-30
xfce4
2019-04-30