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 相关文章推荐
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
jQuery实现验证码功能
Mar 17 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
解决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中$_SERVER的详细参数与说明
2008/07/29 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
《一件运动衫》教学反思
2014/02/19 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
库房管理员岗位职责
2014/03/09 职场文书
实验室标语
2014/06/21 职场文书
树转促学习心得体会
2014/09/10 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
2014年库房工作总结
2014/11/26 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
高一数学教学反思
2016/02/18 职场文书