vue-waterfall2 瀑布流,触底加载更多

监听滚动到底部事件:

javascript 复制代码
function isScrollToBottom() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  return scrollTop + clientHeight >= scrollHeight-100;
}

在mounted里增加监听scroll:

javascript 复制代码
  mounted() {
    let _this = this
    this.dataList = this.originData
    window.addEventListener('scroll', function () {
      // 判断是否滚动到了底部
      if (isScrollToBottom() && !_this.loading) {
        _this.loading = true;
        // 加载更多内容
        _this.loadmore()
      }
    });
  },

这样就可以触底loadmore了。。

参考链接:

vue-waterfall2的简介及使用教程 - Made with Vuejs

实现当滚动到页面底部时,加载更多内容_在最底部的分页 切换时 底部变多-CSDN博客

相关推荐
jerrywus2 分钟前
让 AI 帮你部署 Vercel,报错了也不用手动搬日志
前端·agent·mcp
补码缩写8 分钟前
11 行 Python 拆 PNG 块,解压后的字节数能手算
前端
coding漫漫长路10 分钟前
PNG压缩先看图是哪一类,先无损再量化多半白做
前端
用户2576807632111 分钟前
搜「洗牙」为什么搜不到「洁治」
前端
费曼学习法18 分钟前
Agent 死循环的根因不在模型:错误分类、退避、熔断、快照四层实现
前端
修炼的dance18 分钟前
同一张PNG换五种压法,体积差在颜色数上
前端
Lank_M19 分钟前
PNG 有损压缩省下的体积,大头不在 deflate
前端
用户老李42 分钟前
相机模型与标定自学教程 02:外参 \[R | t] 与完整投影链路
前端
Dream-Y.ocean1 小时前
鸿蒙PC平台逻控 PLC 编辑器适配实战:基于 Electron 壳方案的纯 JavaScript 梯形图编程与仿真引擎开发
javascript·编辑器·harmonyos
用户老李1 小时前
无线电自学教程 03:电路基础——从欧姆定律到 LC 谐振
前端