vue自定义底部导航栏Tabbar的实现代码


Posted in Javascript onSeptember 03, 2018

vue自定义底部导航栏Tabbar的实现代码

如图所示,要完成类似的一个底部导航切换。

首先。我们需要分为5个大的VUE文件。可以根据自己的习惯来放在不同的位置。

vue自定义底部导航栏Tabbar的实现代码

我将5个主要的vue文件放在了5个不同的文件夹

然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件

Item.vue文件如下

<template>
 <div class="itemWarp flex_mid" @click='changePage'>
 <span v-show='!bol'>
  <slot name='normalImg'></slot>
 </span>
 <span v-show='bol'>
  <slot name='activeImg'></slot>
 </span>
 <span v-text='txt'></span>
 </div>
</template>
<script type="text/javascript">
 export default{
 name: 'Item',
 props:{
  txt:{
  type:String
  },
  page:{
  type:String
  },
  sel:{
  type:String
  }
 },
 computed:{
  bol: function(){
  if(this.sel == this.page){
   return true;
  }
  return false;
  }
 },
 methods:{
  changePage:function(){
  //点击跳转对应的页面
  this.$router.push('/'+this.page);
  this.$emit('change',this.page)
  }
 }
 }
</script>
<style type="text/css">
 .itemWarp{
 flex-grow: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 }
 .itemWarp span{
 font-size: 12px;
 }
</style>

Tabbar.vue文件如下

<template>
 <div class="tabberWarp" >
 <div class="warp">
  <Item :txt='item.txt' :page='item.page' @change='getVal' v-for='item in tabbarDes':sel='selected'>
  <img :src="item.normalImg" slot='normalImg'>
  <img :src="item.activeImg" slot='activeImg'>
  </Item>
 </div>
 </div>
</template>
<script type="text/javascript">
 import Item from './Item.vue'
 export default{
 components:{
  Item
 },
 data:function(){
  return{
  selected:'skin',
  tabbarDes:[
   {
   txt:'表情',
   page:'skin',
   normalImg:require('../assets/images/zz_07.jpg'),
   activeImg:require('../assets/images/22_03.jpg')
   
   },  
   {
   txt:'皮肤',
   page:'phiz',
   normalImg:require('../assets/images/download_skin_ic.png'),
   activeImg:require('../assets/images/112_26.jpg')
   },
   {
   txt:'词库',
   page:'thesaurus',
   normalImg:require('../assets/images/zz_09.jpg'),
   activeImg:require('../assets/images/icon2_03.jpg')
   },
   {
   txt:'账号',
   page:'account',
   normalImg:require('../assets/images/zz_11.jpg'),
   activeImg:require('../assets/images/cion_03.jpg')
   },
   {
   txt:'设置',
   page:'setup',
   normalImg:require('../assets/images/zz_13.jpg'),
   activeImg:require('../assets/images/22_03.jpg')
   }
  ]
  }
 },
 methods:{
  getVal:function(res){
  this.selected = res;
  }
 }
 }
</script>
<style type="text/css">
 .warp{
 width: 100%;
 border-top: 1px solid #eee;
 background: #fff;
 display: flex;
 align-items: center;
 justify-content: space-around;
 font-size: 0;
 }
 .warp img{
 width: 20px;
 height: 20px;
 }
 .tabberWarp img{
 margin-top: 10px;
 margin-bottom: 5px;
 }
 .tabberWarp{
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 padding-bottom: 5px;
 background: #fff;
 }
</style>

Tabbar.vue文件和Item.vue的关系为父子关系.

Tabbar.vue组件 通过v-for循环tabbarDes里面的数据.再通过 props 向下传递数据给子组件.Item.vue能接受到父组件传递的数据.

Item.vue组件绑定点击事件.

this.$router.push('/'+this.page);为跳转到对应的page

this.$emit('change',this.page)为使用$emit 触发父组件的自定义事件 change,将this.page作为参数传递到父组件中.父组件点击获取到传递过来的参数.再通过props传递给item.vue.在computed计算属性中.返回不同的布尔值.来做底部图片的显示隐藏.

最后仅需要在App.vue中引入Tabbar组件即可.

<template>
 <div id="app">
  <router-view></router-view>
  <Tabbar></Tabbar>
  <div class="empty"></div>
 </div>
</template>
<script>
import Tabbar from'./components/tabbar'
export default {
 name: 'app',
 created:function(){
  this.$router.push('/')
 },
 components:{
  Tabbar
 }
}
</script>

总结

以上所述是小编给大家介绍的vue自定义底部导航栏Tabbar的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
一个网马的tips实现分析
Nov 28 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 #Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 #Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 #Javascript
详解vue-cli下ESlint 配置说明
Sep 03 #Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 #Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 #Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 #Javascript
You might like
世界上第一台立体声收音机
2021/03/01 无线电
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
python生成器的使用方法
2013/11/21 Python
20招让你的Python飞起来!
2016/09/27 Python
python 日期操作类代码
2018/05/05 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
keras:model.compile损失函数的用法
2020/07/01 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
什么是组件架构
2016/05/15 面试题
标准毕业生自荐信范文
2013/11/04 职场文书
批评与自我批评材料
2014/02/15 职场文书
司机职责范本
2014/03/08 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
2016新年慰问信范文
2015/03/25 职场文书