Vue 使用原生Js实现上拉加载的思路。

在离开页面时，销毁的钩子中，调用上拉加载触发的方法。

在方法中获取变量scrollTop是滚动条滚动时，距离顶部的距离,

变量windowHeight是可视区的高度,

变量scrollHeight是滚动条的总高度 滚动条到底部的条件。 最后判断当前滚动高度和当前可视总高度==滚动条总高度就执行的逻辑操作。

核心代码。

mounted() {
    //上拉加载触发的方法
    window.onscroll = () => {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      //scrollTop!=0是由于其他功能在body上设置了最小高度100vh，切换tab的时候body高度位100vh。
      if (
        Math.ceil(scrollTop + windowHeight) == parseInt(scrollHeight) &&
        scrollTop != 0
      ) {
        // 在这里调用请求加载数据的方法即可
        alert("触发了上拉加载更多");
      }
    };
  },
  beforeDestroy() {
    //离开页面时的生命周期函数
    window.onscroll = () => {};
  },

HTML代码

<ul>
      <li v-for="(val, i) in 15" :key="i">京东商品{{ i }}</li>
      <h3>-----------我是底部-----------</h3>
</ul>

效果