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 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 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
建立文件交换功能的脚本(二)
2006/10/09 PHP
mysql5详细安装教程
2007/01/15 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
AngularJS基础知识
2014/12/21 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
python获取当前日期和时间的方法
2015/04/30 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
python序列化与数据持久化实例详解
2019/12/20 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
师范毕业生求职自荐信
2013/09/25 职场文书
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
实习公司领导推荐函
2014/05/21 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
日语系毕业求职信
2014/07/27 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
主题班会开场白
2015/06/01 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书