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 相关文章推荐
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
javascript常用功能汇总
Jul 05 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 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中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
初识Laravel
2014/10/30 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
JS实现self的resend
2010/07/22 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Python代码需要缩进吗
2020/07/01 Python
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
后勤人员自我评价怎么写
2013/09/19 职场文书
毕业生简单求职信
2013/11/19 职场文书
企业诚信承诺书
2014/05/23 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
百年孤独读书笔记
2015/06/29 职场文书
一年级语文教学随笔
2015/08/14 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android