tabbar案例
运行效果
实现步骤
-
在终端执行
vue create Tabbar
命令,创建一个Tabbar文件夹,并在Components文件夹下新建tabbar文件夹.
-
自定义TabBar组件,在App中使用
让TabBar处于底部,并且设置相关的样式
<template>
// 定义插槽 使得TabBar中显示的内容由外界决定
<div id="tab-bar">
<slot></slot>
</div>
</template>
<script>
export default {
name:'TabBar'
}
</script>
<style>
// flex布局平分TabBar
#tab-bar{
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #f6f6f6;
box-shadow: 0px -3px 1px rgba(100, 100, 100, .1);
}
</style>
- 自定义TabBarItem,可以传入图片和文字
<template>
// 定义TabBarItem,并且定义三个插槽:图片,文字和活跃状态
<div class="tab-bar-item" @click="itemClick">
// 给插槽外层包装div,用于设置样式
<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-text"></slot