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 相关文章推荐
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
简单实现jquery焦点图
Dec 12 Javascript
在node中如何使用 ES6
Apr 22 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
Javascript设计模式之原型模式详细
Oct 05 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静态新闻列表自动生成代码
2007/06/14 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
收集的10个免费的jQuery相册
2011/02/26 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
python在不同层级目录import模块的方法
2016/01/31 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python时间日期操作方法实例小结
2020/02/06 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
监督检查工作方案
2014/05/28 职场文书
2014年后勤工作总结
2014/11/18 职场文书
行政经理岗位职责
2015/04/15 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
导游词之日本富士山
2020/01/06 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android