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写的一个链表实现代码
Oct 25 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
jQuery实现全选按钮
Jan 01 jQuery
前端canvas中物体边框和控制点的实现示例
Aug 05 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
用PHP查询域名状态whois的类
2006/11/25 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
9种改善AngularJS性能的方法
2017/11/28 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python处理“
2019/06/10 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
UNIX命令速查表
2012/03/10 面试题
关于爱情的广播稿
2014/01/16 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
经典演讲稿汇总
2014/05/19 职场文书
供电工程专业求职信
2014/08/09 职场文书