Vue.js 学习笔记阶段案例：TabBar

目录

阶段案例：TabBar

---

阶段案例：TabBar

如果在下方有一个单独的 TabBar 组件，你如何封装？

效果图：

实现思路

首先自定义 TabBar 组件。在 APP 中使用，让 TabBar 位于底部，并且设置相关的样式。TabBar 中显示的内容由外界决定。定义插槽，flex 布局平分 TabBar。

其次自定义 TabBarItem 组件，可以传入图标和文字。定义 TabBarItem，并且定义图标、文字两个插槽。给两个插槽外层包装 div，用于设置样式。填充插槽，实现底部 TabBar 的效果。

代码实现

先创建名为 tabbar 的项目（选择自定义，添加路由）。

vue create tabbar

把准备好的静态资源图标和基本样式放在项目里。

 |- /assets
+   |- /css
		| - base.css // 基本样式
+   |- /font // 这里使用iconfont字体图标
		| - iconfont.css
		| - iconfont.ttf

src/assets/css/base.css

body {
	padding: 0;
  margin: 0;
}

/* 活动路由 class */
.active {
	color: #aa0000;
}
/* 图标字体大小 */
.iconfont {
	font-size: 20px;
}

创建四个视图组件。

src/views/Home.vue

src/views/Category.vue

src/views/ShoppingCart.vue

src/views/Mine.vue

配置路由。

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
	{
		path: '/',
		redirect: '/home'
	},
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/category',
    name: 'Category',
    component: () => import('../views/Category.vue')
  },
  {
    path: '/shoppingCart',
    name: 'ShoppingCart',
    component: () => import('../views/ShoppingCart.vue')
  }, 
	{
    path: '/mine',
    name: 'Mine',
    component: () => import('../views/Mine.vue')
  }
	
]

const router = new VueRouter({
  routes,
	// 配置活动路由 class
	linkActiveClass: 'active'
})

export default router

创建 TabBar 和 TabBarItem 组件。

src/components/tabbar/TabBarItem .vue

src/components/tabbar/TabBar .vue

修改 App.vue

这里为大家提供该案例中 iconfont 字体图标在线链接：

     @import url("//at.alicdn.com/t/font_2543261_qfljvc23ga.css");