vue实现移动端上拉加载更多

  <!-- 容器 -->
  <div ref="body" @scroll.passive="scrollEvent"></div>

// 定义一个flag变量 充当节流阀
let flag = 0;
// 定义一个wait变量 延迟多长时间触发
let wait = 1500;
export default {
  name: "Demo",
  data() {
    return {};
  },
  methods: {
    // 滚动事件
    scrollEvent() {
      // 获取容器盒子的dom
      let body = this.$refs.body;
      // 判断滚动条距离容器底部的位置 当滚动条距离容器底部只有5像素时触发
      if (body.scrollHeight - body.scrollTop - 5 <= body.clientHeight) {
        if (flag) return;
        flag = 1; // 执行完一次后 关闭节流阀

        // setTimeout 根据个人需求来定
        setTimeout(() => {
          // 需要执行的操作 执行完成后开启节流阀flag = 0;
          // 如果不需要在进行操作 flag无需改变或者flag = 1;
        }, wait);
      }
    },
  },
};

其中.passive修饰符可以参考这篇文章 https://www.jianshu.com/p/b12d0d3ad4c1

代码里有注释，大家自己看哈，有什么不对的地方欢迎指正

补充一句，容器要有固定的高度