Home > Web Front-end > JS Tutorial > body text

How to create a bottom navigation TabBar on the vue homepage

php中世界最好的语言
Release: 2018-03-07 09:38:07
Original
2565 people have browsed it

This time I will bring you the bottom navigation TabBar on the vue homepage. What are the precautions for making the bottom navigation TabBar on the vue homepage? The following is a practical case, let's take a look.

<template>
  <div class="index">
  <div class="mainContent">
     <router-view></router-view>  
  </div>
   <div class="bottomBar">
      <ul>
       <li @click="toColor" > <router-link :to="{name:&#39;MapPlat&#39;}"> 
        ![](../assets/images/ic_map_nor@2x.png)![](../assets/images/ic_map@2x.png)        <p :class="{bottomBarColorActive:isColor}">展图</p></router-link></li>
       <li @click="toColor2"> <router-link :to="{name:&#39;Agenda&#39;}"> 
       ![](../assets/images/ic_yicheng_nor@2x.png)![](../assets/images/ic_yicheng@2x.png)       <p :class="{bottomBarColorActive:isColor2}">议程</p></router-link></li>
       <li @click="toColor3"> <router-link :to="{name:&#39;Recommend&#39;}">
        ![](../assets/images/ic_tuijian_nor@2x.png)![](../assets/images/ic_tuijian@2x.png)        <p :class="{bottomBarColorActive:isColor3}">推荐</p></router-link></li>
       <li @click="toColor4"> <router-link :to="{name:&#39;Attention&#39;}">
        ![](../assets/images/ic_guanzhu_nor@2x.png)
        ![](../assets/images/ic_guanzhu@2x.png)        <p :class="{bottomBarColorActive:isColor4}">关注</p></router-link></li>
       <li @click="toColor5"> <router-link :to="{name:&#39;Intro&#39;}"> 
       ![](../assets/images/ic_jianjie_nor@2x.png)
       ![](../assets/images/ic_jianjie@2x.png)       <p :class="{bottomBarColorActive:isColor5}">简介</p></router-link></li>
      </ul>
    </div>  
  </div></template><script>export default {  name: &#39;index&#39;,
  data () {    return {     isColor:true,     isColor2:false,     isColor3:false,     isColor4:false,     isColor5:false
    }
  },  methods:{    toColor:function(){      this.isColor=true;      this.isColor2=false;      this.isColor3=false;      this.isColor4=false;      this.isColor5=false;
    },        toColor2:function(){      this.isColor=false;      this.isColor2=true;      this.isColor3=false;      this.isColor4=false;      this.isColor5=false;
    },        toColor3:function(){      this.isColor=false;      this.isColor2=false;      this.isColor3=true;      this.isColor4=false;      this.isColor5=false;
    },        toColor4:function(){      this.isColor=false;      this.isColor2=false;      this.isColor3=false;      this.isColor4=true;      this.isColor5=false;
    },      toColor5:function(){      this.isColor=false;      this.isColor2=false;      this.isColor3=false;      this.isColor4=false;      this.isColor5=true;
    },
  }
}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.index {  height: 100%;
}.bottomBar {  height: 100px;  width: 100%;  border: 1px solid #ccc;  bottom: 0;  background: rgba(255,255,255,0.90);  position: fixed;  bottom: 0;
}.bottomBar ul {  display: flex;  width: 100%;  justify-content:space-around;
}.bottomBar  ul li {  /*width: 20%;*/}.bottomBar  ul li img {  margin: 8px 0;
}.bottomBar ul li p {  font-family: "PingFangSC-Regular";  font-size: 20px;  color: #D2D7E8;  letter-spacing: 0;  line-height: 20px;
}.mainContent {  height:-webkit-calc(100% - 100px);  height:-moz-calc(100% - 100px);  height:calc(100% - 100px);
}.bottomBarColorActive {  color: #4D81EE !important;
}</style>
Copy after login

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Using Video.js to implement H5 live broadcast interface

Continuous integration of Jenkins+Node.js

The above is the detailed content of How to create a bottom navigation TabBar on the vue homepage. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template