Mint UI tab-container 结合 tabbar

底部导航图片使用的是 iconfont , tab-container 和 tabbar 效果联动, 主要是处理 active 和 bottomNav

<template>
  <div>
    <mt-tab-container v-model="active" swipeable>
      <mt-tab-container-item id="0" style="background-color: red;height:100vh;">
        123
      </mt-tab-container-item>
      <mt-tab-container-item id="1" style="background-color: yellow;height:100vh;">
        456
      </mt-tab-container-item>
      <mt-tab-container-item id="2" style="background-color: green;height:100vh;">
        789
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-tabbar v-model="bottomNav" fixed>
      <mt-tab-item :id="key" v-for="(item, key) in menus" :key="key" @click.native="tabChanged(item.path)">
        <svg aria-hidden="true" class="icon icon-size-item" :class="{ active:bottomNav === key }">
          <use :xlink:href="`#${item.icon}`"/>
        </svg>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      active: '0',
      bottomNav: 0,
      menus: [
        {
          name: "menu1",
          path: '0',
          icon: 'icon-home'
        },
        {
          name: "menu2",
          path: '1',
          icon: 'icon-gongju'
        },
        {
          name: "menu3",
          path: '2',
          icon: 'icon-wode'
        }
      ]
    }
  },
  watch: {
    active: function (val) {
      this.bottomNav = parseInt(val)
    }
  },
  methods: {
    tabChanged (data) {
      this.active = data
    }
  }
}
</script>
<style scoped>
.active {
  fill: #409eff !important;
}
</style>

Version:

"mint-ui": "^2.2.13"
"vue": "^2.6.10"