vue+vant 的h5自定义tabbar栏，下滑隐藏tabbar

首先在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, //currentIndex接收父组件传来的activeIndex值，，v-model绑定的必须有值，否则会报错
      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 {
    
    
      // 监听tabbar
      headerShow: "",
      isShow: "", //隐藏tabbar
      title: "",
      code: "",
      tabBarShow: "",
      active: 0
    };
  },
  components: {
    
     tabBar },
  watch: {
    
    
    // 使用vue的路由钩子监听页面header以及tabBar的显示与隐藏
    $route(to, from) {
    
    
      //判断tabbar是否显示
      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; // 获取页面滚动高度
      //隐藏tabbar
      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>