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>