vue监听某一元素的上滑显示头部，下滑隐藏头部，移动端

获取某元素的当前位置，用深度监听，当前位置和上一次位置。进行相应的判断和操作

<template>
  <div id="vilege">
    <!-- 内容 -->
    <div class="content">
      <div id="main" class="main" @scroll="scroll"></div>
      <!-- 尾部 -->
      <div class="footer"></div>
    </div>
    <!-- 头部固定在头部看，默认为显示，当下滑时，头部隐藏，上滑头部就显示 -->
    <div class="header" v-show="showHeader">
      <div class="heads">
        <div class="head_left">
          <img src="@img/newcard/privilege/position_left.png" alt />
          <div>
            <p class="text">办理有惠生活熊猫卡全年预计可省</p>
            <p class="numbers">¥24164</p>
          </div>
        </div>
        <p class="head_right">本页预计可省，视个人消费情况而定</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      height: "",
      showHeader: true
    };
  },
  methods: {
    scroll(e) {
      this.height = e.target.scrollTop;
    }
  },
  watch: {
    height: {
      handler(newName, oldName) {
        if (newName > oldName) {
          this.showHeader = false;
        } else {
          this.showHeader = true;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#vilege {
  width: 100vw;
  padding: 0;
  margin: 0;
  background-color: #1a1919;
}

// 头部
.header {
  width: 100vw;
  height: 0.6rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 820500;
  background: rgba(0, 0, 0, 0.3);
}
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  // 内容
  .main {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100vw;
  }

  // 尾部
  .footer {
    width: 100vw;
    background: #000;
  }
}
</style>

~~~`在这里插入代码片`