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

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

創(chuàng)新互聯(lián)長期為千余家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為嘉祥企業(yè)提供專業(yè)的網站設計制作、網站設計，嘉祥網站改版等技術服務。擁有十載豐富建站經驗和眾多成功案例,為您定制開發(fā)。

底部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組件，監(jiān)聽子類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組件的封裝實踐實例

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：vue.js移動端tab組件的封裝實踐實例
文章位置：http://aaarwkj.com/article20/iidjjo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、品牌網站制作、標簽優(yōu)化、定制開發(fā)、動態(tài)網站、網站設計

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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