在component/tabbar
中新建组件TabBar.vue
,内容如下:
<template>
<div class="tab-bar">
<slot></slot>
</div>
</template>
<script>
import TabBarItem from './TabBarItem'
export default {
name: "TabBar",
};
</script>
<style>
.tab-bar {
display: flex;
position: fixed;
right: 0;
left: 0;
bottom: 0;
height: 49px;
box-shadow: 0px -2px 1px rgba(204,204,204,0.5);
}
</style>
在component/tabbar
中新建组件TabBarItem.vue
,内容如下:
<template>
<div class="tab-bar-item" @click="clickItem">
<div v-if = '!isActive'><slot name = "item-icon"></slot></div>
<div v-else ><slot name="item-icon-active"></slot></div>
<div :style = 'activeStyle'><slot name = "item-content"></slot></div>
</div>
</template>
<script>
export default {
name : 'TabBarItem',
props : {
path : String,
//颜色可以自定义,传的值必须是一个字符串
activeColor: {
type: String,
// default: 'red'
}
},
data() {
return {
// isActive : true,
}
},
methods : {
clickItem() {
this.$router.push(this.path)
}
},
computed : {
//当isACtive为ture的时候,字体颜色发生改变
isActive() {
return this.$route.path.indexOf(this.path) !== -1
},
activeStyle() {
return this.isActive ? {color: this.activeColor} : {}
}
}
};
</script>
<style>
.tab-bar > .tab-bar-item {
flex: 1;
text-align: center;
}
.tab-bar .tab-bar-item img {
width: 24px;
height: 24px;
margin-top: 3px;
vertical-align: middle;
margin-bottom: 2px;
}
</style>
在component/mainTabBar
中新建组件mainTabBar.vue
,内容如下:
<template>
<tab-bar>
<tab-bar-item path="/home" activeColor="#FF5977">
<img slot="item-icon" src="../../assets/img/home.svg" alt />
<img slot="item-icon-active" src="../../assets/img//home_active.svg" alt />
<div slot="item-content">首页</div>
</tab-bar-item>
<tab-bar-item path="/category" activeColor="#FF5977">
<img slot="item-icon" src="../../assets/img/category.svg" alt />
<img slot="item-icon-active" src="../../assets/img/category_active.svg" alt />
<div slot="item-content">分类</div>
</tab-bar-item>
<tab-bar-item path="/shopCart" activeColor="#FF5977">
<img slot="item-icon" src="../../assets/img/shopcart.svg" alt />
<img slot="item-icon-active" src="../../assets/img/shopcart_active.svg" alt />
<div slot="item-content">购物车</div>
</tab-bar-item>
<tab-bar-item path="/profile" activeColor="#FF5977">
<img slot="item-icon" src="../../assets/img/profile.svg" alt />
<img slot="item-icon-active" src="../../assets/img/profile_active.svg" alt />
<div slot="item-content">我的</div>
</tab-bar-item>
</tab-bar>
</template>
<script>
import TabBar from "../tabbar/TabBar";
import TabBarItem from "../tabbar/TabBarItem";
export default {
name: "App",
components: {
TabBar,
TabBarItem,
},
};
</script>
<style>
</style>
router
文件夹index.js
中配置路由相关信息
import Vue from 'vue';
import VueRouter from 'vue-router'
//导入需要懒加载的路由
const Home = () => import('../views/Home/Home.vue');
const Category = () => import('../views/Category/Category')
const shopCart = () => import('../views/Cart/Cart.vue');
const Profile = () => import('../views/Profile/Profile.vue');
//挂载
Vue.use(VueRouter);
const routes = [
{
path : '',
redirect: '/home'
},
{
path :'/home',
component : Home,
},
{
path: '/category',
component: Category
},
{
path :'/shopCart',
component : shopCart
},
{
path : '/profile',
component : Profile
}
];
const router = new VueRouter({
routes,
mode : 'history'
})
export default router;
在view
中配置要显示的内容:内容都是相似的,此处只列举一个
<template>
<h2 class="title">首页</h2>
</template>
<script>
export default {
}
</script>
<style>
.title {
color : orange;
}
</style>
main.js
中的内容:
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
}).$mount('#app')
app.vue
中的内容:
<template>
<div id="app">
<router-view></router-view>
<main-tab-bar></main-tab-bar>
</div>
</template>
<script>
import MainTabBar from './components/mainTabBar/mainTabBar'
export default {
name: "App",
components: {
MainTabBar
},
};
</script>
<style>
@import "./assets/css/base.css";
</style>
assets/css
中base.js
中的代码如下:
body {
margin : 0;
padding : 0;
}