Vant组件库实现App里的TabBar标签栏

实现：构建产品的TabBar，支持高亮效果

操作：

1. 查看文档，vant-tabbar 组件满足我们的需求，该组件支持作用域插槽，通过 props.active 可以判断标签是否选中

 

 2. 拷贝代码做修改

  
    首页
    # 暂时删除作用域插槽携带的数据props
    
  
  ...另外3个tabbar-item不做展示

3. 设置 vant-bar 的路由模式，来支持路由跳转

# 配置两点 route + to

  
    首页
    
  

  
    健康百科
    
  

 

4. 设置导航高亮，更换图标、更换导航文字颜色

        4.1 更换图标通过作用域插槽携带的 props.active 值实现，值为true 时 cp-icon 组件 name 拼接 'active'，值为false 时 cp-icon 组件 name 拼接 'default'

      
        首页
        
      

      
        健康百科
        
      

        4.2 更换导航文字颜色，通过vant组件库自动添加的 van-tabbar-item--active 类名实现

# 直接写一段scss搞定, 不玩花头精

 

 

End--------------------------