vue編寫的底部導航欄項目

本篇文章來介紹用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