Home > Article > Web Front-end > How to create a bottom navigation TabBar on the vue homepage
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:'MapPlat'}"> ![](../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:'Agenda'}"> ![](../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:'Recommend'}"> ![](../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:'Attention'}"> ![](../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:'Intro'}"> ![](../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: 'index', 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>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!