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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
javascript修改图片src的方法
Jan 27 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
js实现简单扫雷
Nov 27 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP7.0版本备注
2015/07/23 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
10款最好的Python开发编辑器
2019/07/03 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
英文简历中的自我评价
2013/10/06 职场文书
食品业务员岗位职责
2014/03/18 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
统计学教授推荐信
2014/09/18 职场文书
八项规定整改方案
2014/10/01 职场文书
三方合作意向书范本
2015/05/09 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫