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 replace()正则替换实现代码
Feb 26 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
SSM VUE Axios详解
Oct 05 Vue.js
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
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
Python画图学习入门教程
2016/07/01 Python
使用Python生成XML的方法实例
2017/03/21 Python
python中pip的安装与使用教程
2018/08/10 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
就业自荐信
2013/12/04 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
留学生求职信
2014/06/03 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
利用Python+OpenCV三步去除水印
2021/05/28 Python
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android
基于Python实现nc批量转tif格式
2022/08/14 Python