vue: 实现移动端tabbar组件

步骤看代码

思路	描述
1.tabbar单文件组件
2 在根组件中注册引入使用
3.1 watch监听$route，切换路由控制显示隐藏
3.2 mounted中，页面刷新时控制显示隐藏

一： 组件

<template >
  <!-- 一：写好tabar组件单文件组件-->
  <div class="tabbar">
    <div class="item active">
      <div class="item__icon">
        <i class="iconfont icon-kecheng"></i>
      </div>
      <div class="item__text">在线课堂</div>
    </div>
    <div class="item">
      <div class="item__icon">
        <i class="iconfont icon-defaultHead"></i>
      </div>
      <div class="item__text">我的</div>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang='stylus' scoped>
.tabbar
  position absolute
  left 0
  right 0
  bottom 0
  display flex
  background-color #fff
  .item
    flex 1
    padding 0.1rem 0
    display flex
    flex-direction column
    align-items center
    .item__icon
      font-size 0
      .iconfont
        font-size 0.37rem
        color #333
    .item__text
      margin-top 0.15rem
      color 0.28rem
      font-size 0.28rem
  .active
    .item__icon .iconfont, .item__text
      color #1DA7E8
</style>

2.在根组件app.vue中控制显示隐藏

<template>
  <div id="app">
    <router-view />
    <TAbbar v-show="showFlag" />
  </div>
</template>

<script>
import TAbbar from '@/components/TAbbar'
export default {
  name: 'app',
  data: function () {
    return {
      showFlag: true
    }
  },
  // 二：注册引入使用
  components: {
    TAbbar
  },
  // 三： 控制显示
  watch: {
    // 2.1 watch监听$route，切换路由是显示隐藏
    $route (to, from) {
      if (to.name === 'online-class' ||
        to.name === 'mine') {
        this.showFlag = true
      } else {
        this.showFlag = false
      }
    }
  },
  mounted () {
    // 2.2 mounted中，页面刷新时显示隐藏
    // 有一个满足就显示
    if (this.$route.name === 'online-class' ||
      this.$route.name === 'mine'
    ) {
      this.showFlag = true
    } else {
      this.showFlag = false
    }
  }
}
</script>

<style lang='stylus'>
@import url('~@/assets/styl/base.styl')
@import url('~@/assets/iconfont/iconfont.css')
</style>