我写在了入口App文件中 为父组件
<template>
<div id="app">
<router-view />
//子组件 子传父
<Tabfooter :tabItems="tabItems" v-show="this.$route.meta.isShowTabbar"></Tabfooter>
//this.$route.meta.isShowTabbar 是在路由中定义这个底部导航是否显示
</div>
</template>
<script>
//引入子组件
import Tabfooter from "./components/tabber/Tab_footer"; //
export default {
//局部注册子组件
components: {
Tabfooter
},
data() {
return {
//用来装底部的内容 第一个是没选中的图标
tabItems:[
{
icon:require("./assets/tabbar/home.png"),
icon_active:require("./assets/tabbar/home_active.png"),
title:"首页",
path:"/"
},
{
icon:require("./assets/tabbar/classify.png"),
icon_active:require("./assets/tabbar/classify_active.png"),
title:"分类",
path:"/classify"
},
{
icon:require("./assets/tabbar/cart.png"),
icon_active:require("./assets/tabbar/cart_active.png"),
title:"购物车",
path:"/shop"
},
{
icon:require("./assets/tabbar/mine.png"),
icon_active:require("./assets/tabbar/mine_active.png"),
title:"个人",
path:"/about"
}
]
}
},
};
</script>
子组件
<template>
<div class="Tabfooter">
<div class="Tabfooter_item" v-for="(item,index) in items" :key="index" @click="gotourl(index)">
//点击时和当前下标一样 就让图标亮起来
<div><img :src="itemindex===index?item.icon_active:item.icon" alt="" width="42%"></div>
<div :class="itemindex===index?'tab_item_active':'tab_item'">{{item.title}}</div>
</div>
</div>
</template>
<script>
export default {
//接受父组件传来的
props:{
tabItems:Array
},
data() {
return {
items:this.tabItems,
itemindex:0 //默认选中首页
}
},
methods: {
gotourl(index){
this.itemindex = index
var qwe = this.tabItems[index]
this.$router.push(qwe.path)
}
},
}
</script>
<style scoped>
.Tabfooter{
width: 100%;
height: 64px;
position: fixed;
bottom: 0;
left: 0;
display: flex;
background: white;
}
.Tabfooter_item{
width: 25%;
height: 64px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.tab_item{
color: gray;
font-size: 0.25rem;
}
.tab_item_active{
color: red;
font-size: 0.25rem;
}
</style>
这样写是为了更好操作比如底部不止4个 就更改父组件data中定义的数组就好