Vant的Tabbar标签栏引入自定义图标方式

目录

• Tabbar标签栏引入自定义图标
• vant自义定Tabbar图标和颜色

Tabbar标签栏引入自定义图标

**使用*van-tabbar*组件**

• *v-model*绑定的是对应的Tabbar下标
• *active-color*是未选中的文字颜色
• *inactive-color*是已选中的文字颜色
• **route**这个要特别注意，我就是在这踩了坑，我没有加这个参数，但是能正常跳转路由，但是图标选中会出现问题，每次都需要双击。一直以为是插槽的问题，后面才发现官方api的这个参数

*van-tabbar-item*每一个Tab标签
#icons  自定义图标的插槽
props.active   插槽的值，点击后为true，初始为false

                我的预约
                
            

vant自义定Tabbar图标和颜色

1.index代码：

2.TabBar组件代码

3.运行效果图

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。