本篇文章来介绍用vue编写的 底部导航栏项目 首先先看效果图

点击底部按钮的时候 切换对应的内容

 

1.首先我们来创建一个 底部ui的vue页面，这里起名为 HeadBottom，

页面内容为

<template>

    <div style="background-color: white">
    <div class="bootomcontain">
        <div class="bootomone" @click="categoryFn('1')">
            <img v-if="typeclick=='1'" src="../assets/img/tab2.png" class="imgone">
            <img v-else src="../assets/img/tab2-1.png" class="imgone">

            <div v-bind:class="{'bottomtvcolor-on' :typeclick=='1', 'bottomtvcolor-off':typeclick!='1'}">首页</div>
        </div>
        <div class="bootomone" @click="categoryFn('2')">

            <img v-if="typeclick=='2'" src="../assets/img/tab1.png" class="imgtwo">
            <img v-else src="../assets/img/tab1-1.png" class="imgtwo">

            <div v-bind:class="{'bottomtvcolor-on' :typeclick=='2', 'bottomtvcolor-off':typeclick!='2'}">活动</div>
        </div>
        <div class="bootomone" @click="categoryFn('3')">
            <img v-if="typeclick=='3'" src="../assets/img/tab3.png" class="imgthree">
            <img v-else src="../assets/img/tab3-1.png" class="imgthree">
            <div v-bind:class="{'bottomtvcolor-on' :typeclick=='3', 'bottomtvcolor-off':typeclick!='3'}">群组</div>

        </div>

        <div class="bootomone" @click="categoryFn('4')">
            <img v-if="typeclick=='4'" src="../assets/img/tab4.png" class="imgfour">
            <img v-else src="../assets/img/tab4.png" class="imgfour">
            <div class="bootomthree_ke">客服</div>

        </div>


    </div>
    </div>
</template>

2）样式文件

<style lang="scss" scoped>

  .bootomcontain{
      width: 100%;
      height: 1rem;
      display: flex;
      flex-direction: row;
      font-size: 0.24rem;
      background-color: #ffffff;
      background: url("../assets/img/tab_bg.png") no-repeat ;
      background-size: contain;
      border-top: 0.02rem solid #666666;
  }
  .bootomone{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  .imgone{
     width:0.42rem ;
      height:0.44rem;
      background-repeat: no-repeat;
      background-size: contain;

  }
  .imgtwo{
      width:26px ;
      height:26px;
      background-repeat: no-repeat;
      background-size: contain;
  }
  .imgthree{
      width:26px ;
      height:26px;
      background-repeat: no-repeat;
      background-size: contain;
  }
  .imgfour{
      width:19px ;
      height:19px;
      background-repeat: no-repeat;
      background-size: contain;
      margin-left: 20px;
  }
  .bootomthree_ke{
      color: #fff;
      font-size: 0.24rem;
      margin-left: 20px;
  }
    .bottomtvcolor-on {
        color: #2FADFF;
    }

    .bottomtvcolor-off {
        color: #585858
    }

</style>

下面就是js 的点击切换界面  

<script>
    export default {
        name: "component_name",
        data() {
            return {
                typeclick: '1'//1,2,3

            };
        },
        methods: {
            categoryFn(type) {

                this.typeclick = type;
                switch (type) {
                    case '1':
                        this.$router.replace("/main");
                        break;
                    case '2':
                        this.$router.replace("/case");

                        break;
                    case '3':
                        this.$router.replace("/about");
                        break;

                    case '4'://客服界面

                        this.$router.replace("/me");
                        break;

                    default:
                        break;
                }


            }
        }
    }
</script>

2.修改App.vue文件  在script中导入HeadBottom.vue   作为一个组件使用

import HeadBottom from './components/HeadBottom'
components:{
  HeadBottom
},

修改 template

<template>
  <div id="app" @touchmove.prevent>
    <router-view />
    <head-bottom class="apptwo" v-show="isTabBar"></head-bottom>
  </div>
</template>

这里的    isTabBar 是用来控制底部导航栏是否出现的，因为我们把它放在了App.vue中 它就会在我们的每一个加入路由的页面出现，这里要根据实际情况来隐藏或者展示它，我这里用的方法是 在App.vue里的methods方法里 做了判断，方法如下

isTabBar(){

        if(this.$route.path.indexOf('/homedetails/')>=0){
          return false;
        }else if(this.$route.path.indexOf('/learndetails')>=0){
          return false;
        }else if(this.$route.path.indexOf('/learnitemdetails')>=0){
          return false;
        }else{
          return true;
        }

       
   }

具体的可以下载资源 观看  

https://download.csdn.net/download/shihuiyun/11431383