vue如何实现自定义底部菜单栏


Posted in Javascript onJuly 01, 2019

最近vue不是特别火,自己想写一个vue 的底部菜单栏,然后试着开始写,起来还是听痛苦的,但是还是写出来,这个过程重查询了一些资料和看了一些视频。

1 写好界面

这是我写好的四个界面

vue如何实现自定义底部菜单栏

2 在router.js重定义路由

在一级路由下面定义自己tabbr的子路由。

routes: [
  {
   path: '/',
   name: 'index',
   component:()=>import('./views/index'), //懒加载引入,路由
   children:[
    {path:'',redirect:'/charts'},//重定项
    {path:'/charts',name:'charts',component:()=>import('./views/charts.vue')},
    {path:'/adiscover',name:'adiscover',component:()=>import('./views/adiscover.vue')},
    {path:'/ybutton',ybutton:'ybutton',component:()=>import('./views/ybutton.vue')},
    {path:'/me',name:'me',component:()=>import('./views/me.vue')}
   ]
  },
]

3 封装tabbar底部菜单栏 组件

<template>
<!-- <div class="footbar">
   <router-link to='/' tag='div'>
     <span>      <img :src="this.$route.path=='/charts'?'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3100024767,29226190&fm=58':'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3993527673,913427098&fm=58'" alt="">
     </span>
     <span>资产</span>
   </router-link>
   <router-link to='/adiscover' tag='div'>
     <span>      <img :src="this.$route.path=='/adiscover'?'https://10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAcYPom22osQf2IIdMD25ofYUibd1USSQFHdiaUIiavicpAibgSReIqCky8gqY8ku5qdXsc/356':'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3993527673,913427098&fm=58'" alt="">
     </span>
     <span>商城</span>
   </router-link>
   <router-link to='/ybutton' tag='div'>
     <span>      <img :src="this.$route.path=='/ybutton'?'https://10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAcYPom22osQf2IIdMD25ofYUibd1USSQFHdiaUIiavicpAibgSReIqCky8gqY8ku5qdXsc/356':'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3993527673,913427098&fm=58'" alt="">
     </span>
     <span>交易</span>
   </router-link>
   <router-link to='/me' tag='div'>
     <span>      <img :src="this.$route.path=='/me'?'https://10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAcYPom22osQf2IIdMD25ofYUibd1USSQFHdiaUIiavicpAibgSReIqCky8gqY8ku5qdXsc/356':'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3993527673,913427098&fm=58'" alt="">
     </span>
     <span>我的</span>
   </router-link>
  </div> -->
<div class="footer">
    <router-link v-for="(item,index) in data" :key="index" :to="item.path">
      <div class="divs" @click="tab_click(item.path)">
        <i :class="item.icon==true?'red':'bloack'">1</i>
        <i>{{item.title}}</i>  
      </div>  
    </router-link>    
</div>
</template>
<script>
import { constants } from 'crypto';
export default {
  props:{
    data:Array
  },
  data(){
    return{ 
      datai:this.data
    }
  },
  created(){
  },
  mounted(){
    console.log(this.data)
  },
  methods:{
    tab_click(path){
      const that=this;
      let datary=this.data;
        for(let i=0;i<datary.length;i++){ 
            datary[i].icon=false;
          if(datary[i].path==path){ 
            datary[i].icon=true;
             console.log('---------',datary[i].path)
          }
        }    
      this.datai=datary;
      console.log(datary)      
    }
  }   
}
</script>
<style scoped>
.footer{
  position: fixed;
  bottom:0px;
  left:0px;
  width:100%;
  display:flex;
  justify-content: space-between;
}
.footer .divs{padding:10px;}
.red{color:red;font-size:14px;}
.bloack{font-size:14px;color:black;}
/* ---------------- */
 .footbar{
  width: 100%;
  height: 2.613333rem;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  background: white;
  border-top: 1px solid #eeeeee;
  color: #999999;
}
.footbar span{
  display: block;
  font-size: .64rem;
}
.footbar div{
  flex: 1;
  text-align: center;
}
.footbar img{
  height: 1.066667rem;
}
.footbar .router-link-exact-active{
  color: #2F83C3;
}
.footbar .active{
  color: #2F83C3;
}
</style>

4 显示底部菜单栏的界面 引入tabbar 组件

<template>
  <div class="index">
    主页
    <router-view></router-view>
    <tabbar :data="tabbarData"/>
  </div>
</template>
<script>
import tabbar from '../components/tabbaer'
export default {
name:'index',
data() {
  return {
    tabbarData:[
      {title:'微信',icon:true,path:'/charts'},
      {title:'通讯录',icon:false,path:'/adiscover'},
      {title:'发现',icon:false,path:'/ybutton'},
      {title:'我的',icon:false,path:'/me'},
      ]
  }
},
components:{
  tabbar,
},
}
</script>
<style scoped>
  .index{
    width:100%;
    height:100%;
    overflow: hidden;
    padding:16px;
    box-sizing:border-box;
    }   
</style>

5 这就是最终结果

vue如何实现自定义底部菜单栏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js基础学习资料
Nov 23 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 #Javascript
vue中的面包屑导航组件实例代码
Jul 01 #Javascript
Vue动态面包屑功能的实现方法
Jul 01 #Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 #Javascript
基于Vue SEO的四种方案(小结)
Jul 01 #Javascript
JavaScript一元正号运算符示例代码
Jun 30 #Javascript
重学JS之显示强制类型转换详解
Jun 30 #Javascript
You might like
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP函数超时处理方法
2016/02/14 PHP
Laravel 队列使用的实现
2019/01/08 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
Python比较两个图片相似度的方法
2015/03/13 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
解决yum对python依赖版本问题
2019/07/05 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
仓管员岗位职责范文
2013/11/08 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
大学毕业感言200字
2014/03/09 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
离婚财产处理协议书
2014/09/30 职场文书
小学优秀班主任材料
2014/12/17 职场文书
色戒观后感
2015/06/12 职场文书
高中同学会致辞
2015/08/01 职场文书
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python