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

原创于 2022-03-04 07:52:26 发布

· 1k 阅读

4 ·

版权

文章标签：

#vue.js #前端 #前端框架 #javascript

前端专栏收录该内容

55 篇文章

订阅专栏

该博客介绍了如何在Vue项目中利用节流技术处理滚动事件。通过定义一个`flag`变量作为节流阀和设置延迟时间`wait`，当滚动条接近容器底部时，只有在`flag`为0的情况下才会执行操作，防止频繁触发。在操作完成后，可通过`setTimeout`重新设置`flag`，实现节流效果。这种方法确保了滚动事件的高效处理，避免了不必要的计算和更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <!-- 容器 -->
  <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);
      }
    },
  },
};