vue实现底部菜单功能
程序员文章站
2023-11-11 23:15:04
具体代码如下所示:
具体代码如下所示:
<template> <div class="mui-row"> <div class="mui-col-xs-12 mui-row nav"> <div class="mui-col-xs-4" @tap="tab1=1;tab2=1;tab3=1"> <router-link to="/recommend" ><img :src="'img/tabicon/tab1'+tab1+'.png'" @tap="tab1=1;tab2=1;tab3=1"/><span class="mui-tab-label" @tap="tab1=1;tab2=1;tab3=1">{{"推荐好课" | title}}</span></router-link> </div> <div class="mui-col-xs-4" @tap="tab2=2;tab1=2;tab3=1"> <router-link :to="{path: '/broadcast/' +(tabnum=tabnum==undefined?0:tabnum)}"><img :src="'img/tabicon/tab2'+tab2+'.png'" @tap="tab2=2;tab1=2;tab3=1"/><span class="mui-tab-label" @tap="tab2=2;tab1=2;tab3=1">{{"师道直播" | title}}</span></router-link> </div> <div class="mui-col-xs-4" @tap="tab3=2;tab1=2;tab2=1"> <router-link to="/my"><img :src="'img/tabicon/tab3'+tab3+'.png'" @tap="tab3=2;tab1=2;tab2=1"/><span class="mui-tab-label" @tap="tab3=2;tab1=2;tab2=1">{{"我" | title}}</span></router-link> </div> </div> </div> </template> <style scoped> .mui-row { background: #fff; border-top:1px solid #f5f5f5; } .mui-col-xs-12 .mui-col-xs-4 { text-align: center; height: 50px; } img{position:relative; top:0px; width: 30px; height: 30px; padding-top: 0; padding-bottom: 0; } .mui-tab-label{ font-size: 11px; display: block; overflow: hidden; text-overflow: ellipsis; margin-top: -7px; } a{color:#b9b5b5;} .mui-bar{ -webkit-box-shadow: 0 0 1px rgba(222, 219, 219, 0.85); box-shadow: 0 0 1px rgba(222, 219, 219, 0.85); } .mui-row .router-link-exact-active.router-link-active{ color:#3fcdff; } .mui-col-xs-12 .mui-col-xs-4 a{height: 50px; display: inline-block; width: 100%;} </style> <script> export default { created() { this.$route.params.tabnum=0; }, mounted() { if(this.$route.params.tabnum!='undefined'){ this.tabnum=this.$route.params.tabnum;//因为这个切换选项卡就path改变了 } else{ this.tabnum=0; } if(this.$route.path=='/my'){ this.tab3=2;this.tab1=2;this.tab2=1 } else if(this.$route.path=='/broadcast/'+this.tabnum){//因为这里的path是随着选项卡切换改变的。所以要写成动态的。 this.tab2=2;this.tab1=2;this.tab3=1 }else{ this.tab1=1;this.tab2=1;this.tab3=1 } }, beforerouteenter(to, from, next) { // console.log(to) // if (to.params.db == null) { // return next({ name: "", params: { id: to.params.id } }); // } // next(); }, components: {}, data() { return { tabnum:0, tab1:1, tab2:1, tab3:1, } }, methods: { }, watch:{ "$route.params"(tab){ // this.tabnum=this.$route.params.tabnum; }, } } </script>
我的几个图标是这样的。
最终的效果点击那个那个就变成蓝色的。并且进入子页面再切出来他还是蓝色的。
总结
以上所述是小编给大家介绍的vue实现底部菜单功能,希望对大家有所帮助