首先在src目录下新建components文件夹,在components文件夹下建立自己的组件文件,在tabbar里建index.vue文件
tabbar,index.vue的代码如下
<template>
<div class="tabBar" v-if="show">
<van-tabbar
v-model="currentIndex"
active-color="#1989fa"
:border="false"
@change="isActives"
>
<van-tabbar-item
v-for="item in tabBarList"
:to="item.path"
:key="item.id"
>
<span>{{ item.tabBarTxt }}</span>
<img
slot="icon"
slot-scope="props"
:src="props.active ? item.active : item.inactive"
:class="item.tabBarTxt ? 'default_img' : 'tabBar_img'"
/>
</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
data() {
return {
active: 0,
currentIndex: this.isActive,
tabBarList: [
{
active: require("@/assets/icon/h-active.png"),
inactive: require("@/assets/icon/h.png"),
tabBarTxt: "首页",
path: "/Home"
},
{
active: require("@/assets/icon/n-active.png"),
inactive: require("@/assets/icon/n.png"),
tabBarTxt: "发现",
path: "/Park"
},
{
active: require("@/assets/icon/m-acitve.png"),
inactive: require("@/assets/icon/m.png"),
tabBarTxt: "我的",
path: "/Mine"
}
],
url: ""
};
},
props: {
show: Boolean,
isActive: Number
},
watch: {},
created() {},
methods: {
isActives(value) {
this.$emit("isChecked", value);
}
}
};
</script>
<style lang="scss">
.van-tabbar {
height: 12%;
.van-tabbar-item {
.van-tabbar-item__icon {
img {
height: 34px !important;
}
}
}
}
</style>
然后在App.vue中引入组件并监听组件实现下滑隐藏tabbar
App.vue代码如下
<template>
<div id="app" style="min-height:100vh;width:100%;height:100%">
<!-- 缓存Park页面 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<tabBar
:show="isShow"
:isActive="active"
@isChecked="isActives"
v-if="tabBarShow"
></tabBar>
</div>
</template>
<script>
import tabBar from "@/components/tabBar/index.vue";
export default {
data() {
return {
headerShow: "",
isShow: "",
title: "",
code: "",
tabBarShow: "",
active: 0
};
},
components: { tabBar },
watch: {
$route(to, from) {
if (to.name == "Home" || to.name == "Park" || to.name == "Mine") {
this.isShow = true;
this.tabBarShow = true;
if (to.name == "Home") {
this.active = 0;
} else if (to.name == "Park") {
this.active = 1;
} else if (to.name == "Mine") {
this.active = 2;
}
} else {
this.isShow = false;
this.tabBarShow = false;
}
}
},
created() {},
mounted() {
window.addEventListener("scroll", this.scrollHandle);
},
methods: {
scrollHandle(e) {
let top = e.srcElement.scrollingElement.scrollTop;
if (top > 0) this.isShow = false;
else {
this.isShow = true;
}
},
isActives(type) {
this.active = type;
}
}
};
</script>
<style lang="scss">
@import "@/style/mixin.scss";
html,
body,
#app {
height: 100%;
}
</style>