vue.js移動端tab組件的封裝實(shí)踐實(shí)例

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

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

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

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

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

vue.js移動端tab組件的封裝實(shí)踐實(shí)例

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

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

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

tabbaritem封裝

我們知道tababritem有一張正常顯示圖片，選中后的圖片，和圖片下的文字，其中屬性id用來記錄當(dāng)前tabbaritem的組件名，屬性isRouter用來記錄當(dāng)前選中是否是這個(gè)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的點(diǎn)擊方法，來控制當(dāng)前哪個(gè)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)航部分的封裝

最終運(yùn)行效果如下

vue.js移動端tab組件的封裝實(shí)踐實(shí)例

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

分享題目：vue.js移動端tab組件的封裝實(shí)踐實(shí)例
文章位置：http://www.muchs.cn/article20/iidjjo.html

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

廣告

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

成都seo排名網(wǎng)站優(yōu)化