vue.js移动端tab组件的封装实践实例


Posted in Javascript onJune 30, 2017

这是vue.js系列文章第二遍,第一篇讲述的是如何搭建vue.js的开发环境,计划按进度做成一款完整的app,当然前提是时间允许的话。本文用到了stylus语法,至于为什么使用stylus而不去用sass,主要是因为stylus来自于Node.js社区。总之stylus是一款高效的CSS预处理器,具体使用不在本文讨论范围。好了,废话不说了,下面讲述怎么封装tababr的切换。

底部tab进行页面切换,会用到vue里面的路由,也就是vue-router

我们在安装vue-cli时选中默认安装vue-router即可。

安装完毕后,打开我的项目,我们需要在router目录的index.vue中配置路由信息,具体配置信息如下

vue.js移动端tab组件的封装实践实例

从上面图片,我们可以看到,我们一共配置了4子页面,其中redirect为配置默认组件的路由。

路由配置完成后,我们需要封装tab组件了

因为tab组件属于基础组件,所以我们新建了文件夹tab,然后在tab文件夹下面新建了tabbar组件和tababritem组件。我们先说tababritem组件的封装

tabbaritem封装

我们知道tababritem有一张正常显示图片,选中后的图片,和图片下的文字,其中属性id用来记录当前tabbaritem的组件名,属性isRouter用来记录当前选中是否是这个tababritem。

<template>
 <a class="m-tabbar-item" :class="{'is-active':isActive}" @click="goToRouter">
  <div class="m-tabbar-item-icon" v-show="!isActive"><slot name="icon-normal"></slot></div>
  <div class="m-tabbar-item-icon" v-show="isActive"><slot name="icon-active"></slot></div>
  <div class="m-tabbar-item-text"><slot></slot></div>
 </a>
</template>

<script type="text/ecmascript-6">

 export default{
  props: {
   id: {
    type: String
   },
   isRouter: {
    type: Boolean,
    default: false
   }
  },
  computed: {
   isActive () {
    return this.isRouter
   }
  },
  methods: {
   goToRouter () {
    this.$parent.$emit('tabbarActionEvent', this.id)
    // 判断是否为路由跳转
    this.$router.push(this.id)
   }
  }
 }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

 .m-tabbar-item
  flex: 1
  text-align: center
  .m-tabbar-item-icon
   padding-top: 5px
   padding-bottom 1px
   img
    width: 24px
    height: 24px
  .m-tabbar-item-text
   font-size: 8px
   color:#949494
  &.is-active
   .m-tabbar-item-text
    color: #fa3e25

</style>

接下来,我们要封装tababr,tabbar里面需要包含tabbaritem,主要设置了下tabbar的样式,具体代码如下

tabbar的封装

<template>
 <div class="m-tabbar">
  <slot></slot>
 </div>
</template>

<script type="text/ecmascript-6">
 export default {}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

 .m-tabbar
  display: flex
  flex-direction: row
  position: fixed
  bottom: 0
  left: 0
  right: 0
  width: 100%
  overflow: hidden
  height: 50px
  background: #fff
  border-top: 1px solid #e4e4e4

</style>

最后在我们的app.vue里面引用tabbar组件,监听子类tabbaritem的点击方法,来控制当前哪个item的选中颜色文字的改变

app.vue代码

<template>
 <div id="app">
  <router-view></router-view>
  <m-tabbar @tabbarActionEvent='changeSelectedValue'>
   <m-tabbar-item id='Home' :isRouter="isHome">
    ![](./assets/tabbar-home-normal@2x.png)
    ![](./assets/tabbar-home-selected@2x.png)
    首页
   </m-tabbar-item>
   <m-tabbar-item id='Position' :isRouter="isPosition">
    ![](./assets/tabbar-position-normal@2x.png)
    ![](./assets/tabbar-position-selected@2x.png)
    职位
   </m-tabbar-item>
   <m-tabbar-item id='Message' :isRouter="isMessage">
    ![](./assets/tabbar-message-normal@2x.png)
    ![](./assets/tabbar-message-selected@2x.png)
    消息
   </m-tabbar-item>
   <m-tabbar-item id='Me' :isRouter="isMe">
    ![](./assets/tabbar-me-normal@2x.png)
    ![](./assets/tabbar-me-selected@2x.png)
    我
   </m-tabbar-item>
  </m-tabbar>
 </div>
</template>

<script>
 import mTabbar from 'common/tab/tab.vue'
 import mTabbarItem from 'common/tab/tabbar-item'

 export default {
  name: 'app',
  components: {
   mTabbar,
   mTabbarItem
  },
  data () {
   return {
    isHome: true,
    isPosition: false,
    isMessage: false,
    isMe: false
   }
  },
  methods: {
   changeSelectedValue: function (elValue) {
    if (elValue === 'Home') {
     this.isHome = true
    } else {
     this.isHome = false
    }
    if (elValue === 'Position') {
     this.isPosition = true
    } else {
     this.isPosition = false
    }
    if (elValue === 'Message') {
     this.isMessage = true
    } else {
     this.isMessage = false
    }
    if (elValue === 'Me') {
     this.isMe = true
    } else {
     this.isMe = false
    }
   }
  }
 }
</script>

自此tababr已经封装完毕了,其中用到的tabbaritem图片,大家可以自己替换掉,下一篇,会提到导航部分的封装

最终运行效果如下

vue.js移动端tab组件的封装实践实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
js检测用户输入密码强度
Oct 22 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
jQuery表单设置值的方法
Jun 30 #jQuery
JavaScript注册时密码强度校验代码
Jun 30 #Javascript
Bootstrap Table从零开始
Jun 30 #Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 #Javascript
常见的浏览器Hack技巧整理
Jun 29 #Javascript
详解webpack+gulp实现自动构建部署
Jun 29 #Javascript
bootstrapvalidator之API学习教程
Jun 29 #Javascript
You might like
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
php短址转换实现方法
2015/02/25 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
vue axios请求超时的正确处理方法
2018/04/02 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python的subprocess模块总结
2014/11/07 Python
Django缓存系统实现过程解析
2019/08/02 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
大学生军训广播稿
2014/01/24 职场文书
客房服务员岗位职责
2015/02/09 职场文书
机器人瓦力观后感
2015/06/12 职场文书