Un componente de la barra de navegación inferior de Vue

Escriba un componente separado para la barra de navegación inferior para facilitar su uso en proyectos futuros

Dirección de origen: https://github.com/michaelxuzhi/tabbar

Dividido en dos pasos: creación y empaque

Requisitos: independiente, el icono se puede cambiar, el nombre se puede cambiar, diseño flexible

①Análisis: primero es TabBar

TabBar es el marco principal de la barra de navegación, que envuelve toda la barra de navegación

Crear barra de pestañas -> Tabbar.vue

<template>
    <div id="tab-bar">
        // 这里啥都没有
    </div>
</template>

<script>
    export default {
     
     
        name: "Tabbar"
    }
</script>

<style scoped>
    #tab-bar {
     
     
        display: flex; /* 让后续所有的item都以flex摆放*//
        background-color: #f6f6f6;
	
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        box-shadow: 0 -3px 10px rgba(100, 100, 100, .2);
    }
</style>

Cree el área de la barra de navegación principal MainTabBar.vue, aquí está en realidad el área de la barra de navegación Tabbar.vue en un componente independiente, deje que se muestre en MainTabBar, porque la implementación posterior de TabBarItem en el área de la barra de navegación, por lo que todos han sido extraídos Separación e independencia.

MainTabBar.vue

<template>
    <tab-bar></tab-bar>
</template>

<script>
  import TabBar from "./tabbar/Tabbar";
 
  export default {
     
     
    name: "MainTabBar",
    components:{
     
     
      TabBar
    }
  }
</script>

<style scoped>

</style>

Luego haga referencia al componente MainTabBar en App.vue

<template>
  <div id="app">
    <main-tab-bar></main-tab-bar>
  </div>
</template>

<script>
import MainTabBar from '../components/MainTabBar.vue'
export default {
     
     
  name:'App',
  components: {
     
     
    MainTabBar
  }
}
</script>

Hasta este punto, se ha creado un área de barra de navegación inferior, pero no hay contenido dentro, por lo que la altura de Tabbar.vue es 0 y no se puede ver ningún efecto. Solo agregue un poco de altura al estilo de Tabbar.vue . Sé cómo se ve el área de la barra de navegación ahora. Esta altura codificada de forma rígida se eliminará más adelante, y la barra de navegación será compatible con el contenido de TabBarItem

height: 50px;

② Luego crea TabBarItem, que es cada opción

Estas opciones deben insertarse en Tabbar.vue, por lo que Tabbar.vue debe establecer un espacio para que se pueda agregar cada elemento.

<slot></slot>

tabbar -> TabbarItem.vue

Pantalla: se ha configurado flex en la barra de navegación; aquí el elemento se establece en flex: 1; la altura del elemento se da a 49px, que es la altura de la barra de navegación habitual. Si hay una altura, la barra de navegación se puede abrir y se debe establecer el estilo del icono en el elemento.

<template>
    <div class="tab-bar-item" @click="itemClick">
    <!-- 这里要放图标和文字，会在后面继续新增 -->
    </div>
</template>

<script>
    export default {
     
     
      name: "TabbarItem",
      
      data(){
     
     
        return{
     
     },
      
      methods:{
     
     
          itemClick(){
     
     
              // 点击item会执行的操作
          }
      }
    }
</script>

<style scoped>
    .tab-bar-item {
     
     
        flex: 1;
        text-align: center;
        height: 49px;

        font-size: 14px;
    }

    .tab-bar-item img {
     
     
        margin-top: 3px;
        width: 24px;
        height: 24px;
        /* 去掉图片与文字之间的空隙 */
        vertical-align: middle;
        margin-bottom: 2px;
    }

</style>

Se utiliza para insertar iconos y texto en el elemento.

configuración del icono de elemento

<div class="tab-bar-item" @click="itemClick"> 
    
    
	<!-- 判断是否active，注意这里用的是取反 -->
	<div v-if="!isActive" slot="item-icon">
       <slot name="item-icon"></slot>
    </div>
    
    <div v-else slot="item-icon-active">
       <slot name="item-icon-active"></slot>
    </div>
    
    <!-- 这里还要放文字 -->
   
</div>

configuración de texto del elemento

<div slot="item-text" :style="activeStyle">
   <slot name="item-text"></slot>
</div>

La razón para usar espacios con nombre para imágenes y texto es que TabBarItem también es un componente separado separado. Al final, TabBar.vue y TabBarItem.vue serán referenciados y presentados en MainTabBar.

<template>
    <tab-bar>
        <!-- 这里是第一个item-首页 -->
        <!-- 给子页面传递path和activeColor参数 -->
        <tab-bar-item path="/home" activeColor="blue">
            <!-- 图片的路径自己插 -->
            <img slot="item-icon" src="@assets/img/tabbar/home.svg" alt="">
            <img slot="item-icon-active" src="@assets/img/tabbar/home_active.svg" alt="">
            <!-- 这是某一项的文字 -->
            <div slot="item-text">首页</div>
        </tab-bar-item>
        <!-- 这里是第二个item-分类 -->
        <tab-bar-item path="/category" activeColor="green">
            <img slot="item-icon" src="@assets/img/tabbar/category.svg" alt="">
            <img slot="item-icon-active" src="@assets/img/tabbar/category_active.svg" alt="">
            <div slot="item-text">分类</div>
        </tab-bar-item>
    </tab-bar>
</template>

<script>
  // 引用两个组件
  import TabBar from "./tabbar/Tabbar";
  import TabBarItem from "./tabbar/TabbarItem";
  export default {
     
     
    name: "MainTabBar",
    // 注册两个组件
    components:{
     
     
      TabBar,
      TabBarItem
    }
  }
</script>

<style scoped>

</style>

La relación jerárquica es:

img 、 texto -> elemento de barra de pestañas ≈ barra de pestañas -> barra de pestañas principal -> Aplicación

Se hace referencia a estos dos componentes y se usan en MainTabBar.vue, y los parámetros se pasan a la subcapa, así que use accesorios para recibirlos en la subcapa:

Este es el procesamiento lógico de TabBarItem

<script>
    export default {
     
     
      name: "TabbarItem",
      props:{
     
     
        // 接收从MainTabBar传来的path和activeColor两个参数
        path: String,
        activeColor:{
     
     
          type:String,
          default : 'red'
        }
      },
      data(){
     
     
        return{
     
     
        }
      },
      computed : {
     
     
        // 判断一下是否被激活
        isActive() {
     
     
          return this.$route.path.indexOf(this.path) !== -1
        },
        // 被激活时的样式更改
        activeStyle() {
     
     
            return this.isActive ? {
     
     color : this.activeColor} : {
     
     }
        }
      },
      methods:{
     
     
        // 点击某个item，页面上显示对应页面
        itemClick(){
     
     
          this.$router.replace(this.path)
        }
      }
    }
</script>

La realización final del componente necesita: cada icono correspondiente a la barra de navegación y la página de visualización correspondiente

La ruta del icono la modifica usted mismo en MainTabBar.vue, si se requiere la página de visualización correspondiente, es necesario instalar y configurar vue-router

Aquí hay una combinación de carga diferida y configuración simple de dos páginas correspondientes, "Inicio" y "Categoría".

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 引用两个要显示的页面的组件对应文件，使用的是懒加载
const Home = () => import('../views/home/Home');
const Category = () => import("../views/category/Category");

// 配置路由信息
const routes = [
  {
    
    
    path: '',
    redirect : '/home'
  },
  {
    
    
    path: '/home',
    component : Home
  },
  {
    
    
    path: '/category',
    component : Category
  }
]

// 使用的时'history'模式，
const router = new VueRouter({
    
    
  mode : 'history',
  routes
})

export default router

Finalmente me di cuenta