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 相关文章推荐
Prototype源码浅析 Number部分
Jan 16 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
vuex入门最详细整理
Mar 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的session数据存储到数据库中的代码实例
2016/06/24 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python中正则表达式详解
2017/05/17 Python
详谈python read readline readlines的区别
2017/09/22 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Django中的静态文件管理过程解析
2019/08/01 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
实例代码讲解Python 线程池
2020/08/24 Python
Python用户自定义异常的实现
2020/12/25 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
2015年仓库管理员工作总结
2015/04/21 职场文书
小鞋子观后感
2015/06/05 职场文书
2016年教师节感言
2015/12/09 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python