实现思路

老值和新值做比较，

如果新值大于老值，下拉

如果新值小于老值，上拉

代码实现

<template>
  <div>
    <div class="box100">0</div>
    <div class="box100">100</div>
    <div class="box100">200</div>
    <div class="box100">300</div>
    <div class="box100">400</div>
    <div class="box100">500</div>
    <div class="box100">600</div>
    <div class="box100">700</div>
    <div class="box100">800</div>
    <div class="box100">900</div>
    <div class="box100">1000</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 滚动前，滚动条距文档顶部的距离
      oldScrollTop: 0
    }
  },
  mounted() {
    // 监听页面滚动事件
    window.addEventListener('scroll', this.scrolling)
  },
  methods: {
    scrolling() {
      // 滚动条距文档顶部的距离
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

      if (scrollTop > this.oldScrollTop) {
        //下拉
        console.log('下拉')
      } else {
        //上拉
        console.log('上拉')
      }
      // 更新——滚动前，滚动条距文档顶部的距离
      this.oldScrollTop = scrollTop
    }
  }
}
</script>
<style scoped>
.box100 {
  height: 100px;
  background: #3a8ee6;
  border: 1px solid black;
}
</style>

关键截图