效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/425c1a62958a74e7cb0c891ece22f59e.png)
目录结构
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2e466f93c94013579f14d661c3f9b549.png)
TabbarMain
<template>
<keep-alive>
<router-view></router-view>
</keep-alive>
<div class="tabberWarp">
<div class="warp">
<div class="itemWarp flex_mid" v-for='(item,index) in tabbarDes' :key="index" @click="changePage(item.page)">
<span v-show='selected!=item.page'>
<div>
<img :src="item.normalImg" />
</div>
</span>
<span v-show='selected==item.page'>
<img :src="item.activeImg" />
</span>
<span v-text='item.txt'></span>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
name: "tabbarMain1",
components: {
},
data: function () {
return {
selected: '/homepage',
tabbarDes: [
{
txt: '表情',
page: '/homepage',
normalImg: require('@/assets/订单.svg'),
activeImg: require('@/assets/订单.svg')
},
{
txt: '皮肤',
page: '/news',
normalImg: require('@/assets/订单.svg'),
activeImg: require('@/assets/订单.svg')
},
{
txt: '词库',
page: '/myself',
normalImg: require('@/assets/订单.svg'),
activeImg: require('@/assets/订单.svg')
},
]
}
},
methods: {
changePage: function (path) {
this.$router.replace(path);
}
}
}
</script>
<style type="text/css">
.warp {
width: 100%;
border-top: 1px solid #eee;
background: #fff;
display: flex;
align-items: center;
justify-content: space-around;
font-size: 0;
}
.warp img {
width: 20px;
height: 20px;
}
.tabberWarp img {
margin-top: 10px;
margin-bottom: 5px;
}
.tabberWarp {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 5px;
background: #fff;
}
.itemWarp {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.itemWarp span {
font-size: 12px;
}
</style>
子页面[随便都可以]
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8f87ce7ae3f257d63acb7a36c18cbb79.png)
路由设置
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4a268e0c4edba701421666839df81806.png)
Main.vue[使用组件]
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/45d6dc578b65746b8955094ac330b9ea.png)