Tabbar的使用

2019-12-18  本文已影响0人  稻草人_9ac7
<template>
  <div>  
    <mt-tab-container  v-model="selected">

      <mt-tab-container-item id="tab1">
       选项一
      </mt-tab-container-item>
      <mt-tab-container-item id="tab2">
        选项二
      </mt-tab-container-item>
      <mt-tab-container-item id="tab3">
     选项三
      </mt-tab-container-item>
      <mt-tab-container-item id="tab4">
       选项四
      </mt-tab-container-item>
      <mt-tab-container-item id="tab5">
       选项五
      </mt-tab-container-item>
    </mt-tab-container>

    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="tab1">
        <img slot="icon" src="../assets/logo.png"> 外卖
      </mt-tab-item>
      <mt-tab-item id="tab2">
        <img slot="icon" src="../assets/logo.png"> 订单
      </mt-tab-item>
      <mt-tab-item id="tab3">
        <img slot="icon" src="../assets/logo.png"> 发现
      </mt-tab-item>
      <mt-tab-item id="tab4">
        <img slot="icon" src="../assets/logo.png"> 我的
      </mt-tab-item>
      <mt-tab-item id="tab5">
        <img slot="icon" src="../assets/logo.png"> 测试
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'tab1'
      };
    }
  };
</script>
上一篇下一篇

猜你喜欢

热点阅读