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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
threejs太阳光与阴影效果实例代码
Apr 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 header()函数使用说明
2008/07/10 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Django框架模板的使用方法示例
2019/05/25 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
django使用多个数据库的方法实例
2021/03/04 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
历史学专业推荐信
2013/11/06 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers