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 相关文章推荐
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
微信小程序如何利用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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
也谈 PHP 和 MYSQL
2006/10/09 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
详解python内置模块urllib
2020/09/09 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
打架检讨书2000字
2014/02/22 职场文书
检举信的格式及范文
2014/04/04 职场文书
优秀党员申报材料
2014/12/18 职场文书
会计专业求职信范文
2015/03/19 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle