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 相关文章推荐
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
js实现购物车功能
Jun 12 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 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脚本的10个技巧(2)
2006/10/09 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
转党组织关系介绍信
2014/01/08 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
学生安全责任书
2014/04/15 职场文书
《称象》教学反思
2014/04/25 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers