实现效果如图,点击按钮显示页面,活动界面按钮高亮
实现思路
创建项目(使用vue-cli2方式)
删除无用文件
创建base.css,设置基本样式
修改App.vue内容,初步实现样式
<template>
<div id="app">
<div id="tab-bar">
<div class="tab-bar-item">首页</div>
<div class="tab-bar-item">分类</div>
<div class="tab-bar-item">购物车</div>
<div class="tab-bar-item">我的</div>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
@import url("./assets/css/base");
#tab-bar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #f2f2f2;
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
}
.tab-bar-item {
flex: 1;
height: 49px;
text-align: center;
}
</style>
已初具雏形
底部封装为TabBar组件,内部封装TabBarItem,可传入图片和文字
<!-- components文件夹创建tabbar文件夹,创建TabBar.vue文件 -->
<template>
<div id="tab-bar">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'TabBar',
data () {
return {
}
}
}
</script>
<style scoped>
#tab-bar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #f2f2f2;
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
}
</style>
<!-- components/tabbar文件夹下创建TabBarItem.vue文件-->
<template>
<div class="tab-bar-item">
<div><slot name="item-icon"></slot></div>
<div><slot name="item-text"></slot></div>
</div>
</template>
<script>
export default {
name: 'TabBarItem',
data () {
return {
}
}
}
</script>
<style scoped>
.tab-bar-item {
flex: 1;
height: 49px;
text-align: center;
font-size: 14px;
}
.tab-bar-item img {
width: 24px;
height: 24px;
margin-top: 3px;
vertical-align: middle;
margin-bottom: 2px;
}
</style>
<!-- App.vue文件修改 -->
<template>
<div id="app">
<tab-bar>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/home.svg" alt="" />
<div slot="item-text">首页</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/category.svg" alt="" />
<div slot="item-text">分类</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/shopcart.svg" alt="" />
<div slot="item-text">购物车</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/profile.svg" alt="" />
<div slot="item-text">我的</div>
</tab-bar-item>
</tab-bar>
</div>
</template>
<script>
import TabBar from './components/tabbar/TabBar.vue'
import TabBarItem from './components/tabbar/TabBarItem.vue'
export default {
components: { TabBar, TabBarItem },
name: 'App'
}
</script>
<style>
@import url("./assets/css/base");
</style>
实现效果
TabBarItem组件中定义高亮图片,定义变量isActive,通过v-if决定显示对应的icon
TabBarItem绑定路由数据
动态决定高亮图片
实现效果
动态设置文本样式
最终效果
简化App.vue文件