Tabbar

tabbar案例

运行效果

实现步骤

1. 在终端执行vue create Tabbar命令,创建一个Tabbar文件夹,并在Components文件夹下新建tabbar文件夹.
   

2. 自定义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>

3. 自定义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">