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 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
浅析javascript 定时器
Dec 23 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
实例详解带参数的 npm script
May 28 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 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
PHP调用Webservice实例代码
2011/07/29 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP如何将XML转成数组
2016/04/04 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
对layui中表单元素的使用详解
2018/08/15 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python实现巡检系统(solaris)示例
2014/04/02 Python
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python发送Email方法实例
2014/08/21 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python实现代码统计工具
2019/09/19 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
文明村镇申报材料
2014/05/06 职场文书