vue移動端底部菜單tabbar

如果沒有目標作為支撐，只是虛幻的想提升自己，那么我們就像是在演戲一樣，會覺得自己不是自己。　　--阿德勒

之前有同事問移動端怎么弄個底部tab，然后今天出個demo吧，最終效果如下：

 

 

 一.首先用vue-cli新建項目，不知道怎么新建？：https://cli.vuejs.org/zh/guide/creating-a-project.html

 二.刪除框架中多余的東西(不是你自己新建的頁面和組件等)比如給的view文件夾的例子，components文件夾下面的東西，app.vue里面和index.html里面的多余的東西，運行下，報錯可能都是找不到路徑等，自行解決。

三.app.vue文件代碼如下(刪除多余的代碼)：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
  #app{
    width:100%;
    height:100%;
    font-size:14px;
    background:#f1f1f1;
  }
</style>

 

四.在view文件夾下面新建4個vue文件，分別是：主體內容容器、主頁、商城、我的。具體的代碼如下(主頁、商城、我的類似)：

index.vue(主體容器)如下：

<template>
    <div class="index">
        <router-view></router-view>
        <tabBar :tabbarList="tabbarList" />
    </div>
</template>

<script>
import tabBar from '../components/tabbar'
export default {
    name:"index",
    components:{
        tabBar
    },
    data() {
        return {
            tabbarList:[
                {name:"主頁",path:"/home"},
                {name:"商城",path:"/store"},
                {name:"我的",path:"/my"}
            ]
        }
       
    },
    mounted () {
        
    },
}
</script>

<style>

</style>

 

home.vue如下：

<template>
    <div>首頁</div>
</template>
<script>
export default {
    name:"home",
    data() {
        return {
            
        }
    },
}
</script>
<style scoped>

</style>

五.tabbar組件代碼：

<template>
    <div class="tabbar">
        <router-link v-for="(item,index) in tabbarList" :key="index"
        class="tab-item"
        :to="item.path"
        active-class="isActive">
            <div class="item-wrap">{{item.name}}</div>
        </router-link>
    </div>
</template>

<script>
export default {
    name:"tabBar",
    props:{
        tabbarList:Array
    },
    data() {
        return {
        }
    },
    methods: {
    },
}
</script>

<style scoped>
    .tabbar{
        width:100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        background: #ffffff;
        bottom: 0px;
        left: 0px;
    }
    .isActive{
        color:aquamarine;
    }
    .tab-item{
        flex:1;
        font-size:14px;
        height:100%;
    }
    .item-wrap{
        width:100%;
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    a{
        text-decoration:none;
        color:#333;
    }
    a,a:hover,a:active,a:visited,a:link,a:focus{
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;
        outline:none;
        background: none;
        text-decoration: none;
    }
</style>

六.router.js設置路由嵌套，代碼如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

  const route = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes:[
      {
        path: '/',
        component:()=> import('../views/index.vue'),
        children:[
          {
            path:'',
            redirect:'/home'
          },
          {
            path:'/home',
            name:"home",
            component:()=>import('../views/home.vue')
          },
          {
            path:'/store',
            name:"store",
            component:()=>import('../views/store.vue')
          },
          {
            path:'/my',
            name:"my",
            component:()=>import('../views/my.vue')
          },
        ]
      },
    ]
  })
  

export default route

到此，demo已經完成。

總結：關鍵點router-view的用法