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

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

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

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

注意：容器必须要有固定的高度