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博客

相关推荐
frjc5 分钟前
Node.js 与 npm 极简安装教程
前端·npm·node.js
IMPYLH6 分钟前
HTML 的 <main> 元素
前端·html
深念Y8 分钟前
微服务抽取路线图:从胖单体到 ARM 集群
前端·arm开发·数据库·后端·微服务·云原生·架构
阮小贰19 分钟前
干支编码的确定性实现:节气切分 + 1000 条溯源断语(附 JS 源码)
开发语言·javascript·ecmascript
雪芽蓝域zzs25 分钟前
Vue3 + Vite本地模拟数据(读取 JSON 数据)
前端
亿元程序员27 分钟前
还有高手?用Shader让图片中的3D圆环转起来!
前端
灯澜忆梦29 分钟前
【基于GO的Web开发14】gin请求重定向
前端·后端·golang·gin
qq_4523962330 分钟前
第十一篇:《前端性能优化体系:从加载到交互的全链路》
前端·性能优化·交互
Mh33 分钟前
听说我兄弟喜欢跑车,所以必须安排上
前端·javascript·vue.js
zttbee33 分钟前
vue学习(白话功能版)
前端·vue.js·学习·前端框架