vue实现底部菜单功能


Posted in Javascript onJuly 24, 2018

具体代码如下所示:

<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实现底部菜单功能

我的几个图标是这样的。

最终的效果点击那个那个就变成蓝色的。并且进入子页面再切出来他还是蓝色的。

vue实现底部菜单功能

总结

以上所述是小编给大家介绍的vue实现底部菜单功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript mapreduce工作原理简析
Nov 25 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 #Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 #Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 #Javascript
JavaScript引用类型Array实例分析
Jul 24 #Javascript
详解微信小程序调起键盘性能优化
Jul 24 #Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 #Javascript
js+canvas实现验证码功能
Sep 21 #Javascript
You might like
德劲1104的电路分析与改良
2021/03/01 无线电
PHP注释实例技巧
2008/10/03 PHP
浅析php header 跳转
2013/06/17 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php创建无限级树型菜单
2015/11/05 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
javascript函数库-集合框架
2007/04/27 Javascript
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
小程序实现留言板
2018/11/02 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
python实现学员管理系统
2019/02/26 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
后勤人员岗位职责
2013/12/17 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
缓刑人员思想汇报
2014/10/11 职场文书