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阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
原生js编写焦点图效果
Dec 08 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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将数组存储为文本文件方法汇总
2015/10/28 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
DOM精简教程
2006/10/03 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
python判断无向图环是否存在的示例
2019/11/22 Python
使用python去除图片白色像素的实例
2019/12/12 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
父亲节活动策划方案
2014/08/24 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
邀请函模板
2015/02/02 职场文书
实施意见格式范本
2015/06/05 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
2022年四月新番
2022/03/15 日漫