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 相关文章推荐
arguments对象
Nov 20 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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加密解密函数Authcode()修复版代码
2015/04/05 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
vuex的使用和简易实现
2021/01/07 Vue.js
详解Python中的Descriptor描述符类
2016/06/14 Python
python实现八大排序算法(1)
2017/09/14 Python
python编程嵌套函数实例代码
2018/02/11 Python
wxpython实现图书管理系统
2018/03/12 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
使用python绘制温度变化雷达图
2019/10/18 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
python pillow库的基础使用教程
2021/01/13 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
Servlet方面面试题
2016/09/28 面试题
护理专业毕业生自荐书
2014/05/24 职场文书
诚信承诺书
2015/01/19 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
入党转正申请报告
2015/05/15 职场文书
交通事故被告代理词
2015/05/23 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
Python自动化爬取天眼查数据的实现
2021/06/15 Python
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS