快捷導(dǎo)航

vue.js移動端tab組件的封裝實踐實例

更新時間：2017年06月30日 10:25:57 作者：maxZhang

本篇文章主要介紹了vue.js移動端tab的封裝實踐實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

這是vue.js系列文章第二遍，第一篇講述的是如何搭建vue.js的開發(fā)環(huán)境，計劃按進度做成一款完整的app，當(dāng)然前提是時間允許的話。本文用到了stylus語法，至于為什么使用stylus而不去用sass，主要是因為stylus來自于Node.js社區(qū)?？傊畇tylus是一款高效的CSS預(yù)處理器，具體使用不在本文討論范圍。好了，廢話不說了，下面講述怎么封裝tababr的切換。

底部tab進行頁面切換，會用到vue里面的路由，也就是vue-router

我們在安裝vue-cli時選中默認(rèn)安裝vue-router即可。

安裝完畢后，打開我的項目，我們需要在router目錄的index.vue中配置路由信息，具體配置信息如下

從上面圖片，我們可以看到，我們一共配置了4子頁面，其中redirect為配置默認(rèn)組件的路由。

路由配置完成后，我們需要封裝tab組件了

因為tab組件屬于基礎(chǔ)組件，所以我們新建了文件夾tab,然后在tab文件夾下面新建了tabbar組件和tababritem組件。我們先說tababritem組件的封裝

tabbaritem封裝

我們知道tababritem有一張正常顯示圖片，選中后的圖片，和圖片下的文字，其中屬性id用來記錄當(dāng)前tabbaritem的組件名，屬性isRouter用來記錄當(dāng)前選中是否是這個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)
    // 判斷是否為路由跳轉(zhuǎn)
    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，主要設(shè)置了下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組件，監(jiān)聽子類tabbaritem的點擊方法，來控制當(dāng)前哪個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已經(jīng)封裝完畢了，其中用到的tabbaritem圖片，大家可以自己替換掉，下一篇，會提到導(dǎo)航部分的封裝

最終運行效果如下