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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
js实现div在页面拖动效果
May 04 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
js生成随机数方法和实例
Jan 17 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
python得到电脑的开机时间方法
2018/10/15 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
怎样写留学自荐信
2013/11/11 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
促销活动策划方案
2014/01/12 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
Python中tqdm的使用和例子
2022/09/23 Python