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开发包大全整理
Dec 22 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
小程序如何支持使用 async/await详解
Sep 12 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
PHP操作XML作为数据库的类
2010/12/19 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JS实现上传图片实时预览功能
2017/05/22 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
单位在职证明范本
2014/01/09 职场文书
董事长助理岗位职责
2014/02/18 职场文书
有关爱国演讲稿
2014/05/07 职场文书
2014年宣传工作总结
2014/11/18 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers