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 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
jquery 插件学习(一)
Aug 06 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
javascript控制台详解
Jun 25 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
Vue filter介绍及详细使用
Apr 04 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
解决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扩展函数
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php使用google地图应用实例
2014/12/31 PHP
PHP代码优化技巧小结
2015/09/29 PHP
浅谈javascript中的作用域
2012/04/07 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
linux环境下Django的安装配置详解
2019/07/22 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
大课间体育活动方案
2014/03/12 职场文书
法制宣传月活动总结
2014/04/29 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
英文感谢信格式
2015/01/21 职场文书
考研导师推荐信范文
2015/03/27 职场文书
专项资金申请报告
2015/05/15 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
redis 存储对象的方法对比分析
2021/08/02 Redis