mobile footer nav
item 数量可变，图片可变，高亮颜色可变
tabbar.vue
<template>
<div class="tab-bar">
<slot>slot>
div>
template>
<script>
export default {
name: "TabBar",
}
script>
<style scoped>
.tab-bar {
display: flex;
/*让它一直处于底部 左右占满*/
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #f6f6f6;
/*让它上面有一条过渡的线*/
box-shadow: 0 -1px 1px rgba(100,100,100,.1);
}
style>
TabBarItem.vue
<template>
<div class="tab-bar-item" @click="goPage(link)">
<div v-if="!isActive">
<slot name="item-icon">slot>
div>
<div v-else>
<slot name="item-icon-active">slot>
div>
<div :style="activeStyle">
<slot name="item-text">slot>
div>
div>
template>
<script>
export default {
name: "TabBarItem",
props: {
link: String,
activeColor: {
type: String,
default: "red"
}
},
computed: {
isActive() {
return this.$route.path.indexOf(this.link) !== -1; },
activeStyle(){
return this.isActive ? {
color:this.activeColor}:{
}
}
},
methods: {
goPage(link) {
this.$router.push(this.link);
},
},
}
script>
<style scoped>
.tab-bar-item {
flex: 1;
/*让每个项目都占相同的比例*/
text-align: center;
/*mobile 底部导航的通用高度就是49px*/
height: 49px;
cursor: pointer;
}
.tab-bar-item p {
margin: 0;
}
.icon {
width: 24px;
height: 24px;
vertical-align: middle;
/*用来消除 image 周围的空隙 3px*/
margin-top:3px;
margin-bottom:2px;
}
style>
TabBarMain.vue
<template>
<div>
<TabBar>
<TabBarItem v-for="item in tabBarData" :key="item" :link="item.link" :activeColor="item.avtiveColor">
<template v-slot:item-icon>
<img :src="item.icon" class="icon" alt="">
template>
<template v-slot:item-icon-active>
<img :src="item.activeIcon" class="icon" alt="">
template>
<template v-slot:item-text>
<p>{
{item.name}}p>
template>
TabBarItem>
TabBar>
div>
template>
<script>
import TabBar from '@/components/tabbar/TabBar'
import TabBarItem from '@/components/tabbar/TabBarItem'
export default {
name: "App",
data() {
return {
tabBarData: [{
icon: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2457145072,1625315765&fm=26&gp=0.jpg",
activeIcon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fd.lanrentuku.com%2Fdown%2Fpng%2F0904%2FM-v-Player%2FM-v-Player_13.png&refer=http%3A%2F%2Fd.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=ced8bd1a6566e7951faee1761fee5302",
name: "首页",
link: "/home",
avtiveColor: "blue"
},
{
icon: require("@/assets/img/tabbar/cart.png"),
activeIcon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F41%2F51%2F35573d4377e4c5b.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=30b5b6a9a4d90fa011b8208b3a90db1d",
name: "购物车",
link: "/cart",
avtiveColor: "blue"
},
{
icon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F15%2F98%2F4056aecc947d04c.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=b5c7a47c17e191ee6ed3628d7ec28b36",
activeIcon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F80%2F60%2F85574d8c3548d1a.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=a55663e6b32dbc49c81975d1e856fab8",
name: "分类",
link: "/category",
avtiveColor: "blue"
},
{
icon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F39%2F30%2F82573cb6758ba32.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=0a1802371479031d23e65eafa98cb19a",
activeIcon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190703%2F16%2F1562142576-LyutQDBNRh.jpg&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617591426&t=4479fa3539bbddf0590805251e4bccb3",
name: "我的",
link: "/profile",
avtiveColor: "blue"
},
]
}
},
components: {
TabBar, TabBarItem },
}
script>
App.vue
<template>
<div id="app">
<router-view />
<tab-bar-main />
div>
template>
<script>
import TabBarMain from '@/components/tabbar/TabBarMain'
export default {
name: "App",
components: {
TabBarMain },
}
script>
<style>
@import "./assets/css/base.css"
style>