自定义vue底部导航栏组件tabbar

TabBar

自定义vue底部导航栏组件tabbar，效果如下所示：

1. 基本结构搭建

• 根据组件封装的思想，我们事先创建几个文件夹，用来存放对应部分的代码。文件结果如下图所示：
  

• 从效果图来看底部可以分为两个部分：最外层框架区和内层图标区
  

• 组件就是需要的时候可以直接引用并且方便更改，那么我们就可以将tabbar导航栏组件划分为两个小的组件：TabBar.vue、TabBarItem.vue

  • TabBar.vue设置导航栏组件的外观形状
  • TabBarItem.vue负责设置内置图标汉字的样式

2. slot插槽的使用

组件里的图标和汉字我们都是不能写死的，所以就要用到插槽对要填充内容的区域进行占位。

3. TabBar.vue

• 在App.vue中使用

  • TabBar组件的源码中，我们使用了slot插槽进行占位，那么当我们需要填充内容时，直接将内容写入标签里即可。

4. TabBarItem.vue

• 在App.vue中使用

  • 这里我只引用了一次，按照需求我们是需要重复引用四次的
  • 因为TabBarItem.vue中使用的是具名插槽，所以填入的内容也许加上对应插槽的名字，以便替换到正确的位置。

5. 路由的使用

完成上面四步就能的到一个基本的框架，最后把组件跟其他页面通过路由连接起来，就能实现页面的跳转

5.1 配置路由

• router.js

// 1.配置路由相关信息
import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import("../views/home/Home")
const Shopping = () => import('../views/shopping/Shopping')
const Sort = () => import('../views/sort/Sort')
const My = () => import('../views/my/My')

// 2. 安装路由插件
// 所有插件在使用时都要用到，Vue.use()
Vue.use(VueRouter);

// 3. 创建VueRouter对象
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/shopping',
        component: Shopping
    },
    {
        path: '/sort',
        component: Sort
    },
    {
        path: '/my',
        component: My
    }
];

const router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes,
    mode: 'history'
});

// 4. 将路由实例对象倒出
export default router

• main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

5.2 使用路由

• 因为我们是通过点击TabBarItem.vue的tab-bar-item区域，从而实现页面跳转的。那么我们可以对他进行监听

  • 给他绑定一个点击事件，当点击这个区域以后实现页面的跳转

  methods:{
      itemClick(){
          // 当前活跃路由路径跟传过来的不一致时才进行路由跳转
          if(this.$route.path != this.link){
              this.$router.push(this.link);
          }
      }
  }
  

• 实现父子组件通信

  • 设置props，在父组件App.vue中给每一个``tab-bar-item`标签绑定路由地址，再将地址传给子组件

    • App.vue
    • TabBarItem.vue

    export default{
        name: "TabBarItem",
        props:{
            link: String,
        },
    }
    

6. 动态改变样式

最后我们来实现点击前后改变图片和文字的样式，点击前为黑色，点击后变为红色

• 图标点击后变红色

  • 在TabBarItem.vue中再添加一个插槽，点击后替换掉原来那个
  • 设置计算属性isActive，给两个图标插槽绑定v-if和else
  • 当前活跃路由路径跟传过来的一致时isActive为true，显示为红色

• 字体点击后变红

  • 实现父子组件通信，通过props将activeColor（设置字体颜色）传给父组件，在接收父组件传回的值
  • 给插槽动态绑定style，设置一个计算属性activeStyle，如果isActive为true则显示this.activeColor

• 完整代码

  • App.vue
  • TabBarItem.vue