Vue - 案例 - TabBar 思路 + 实现

• 代码：https://github.com/LawssssCat/tabbar
  备份：https://github.com/coderwhy/HYMall

• 视频： https://www.bilibili.com/video/av89760569/?p=120

# 效果

不单只一个项目可用，其他项目均可用

# 思路

如果在下方有一个单独的 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’} : {}

# 代码