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

相关推荐
尘世中一位迷途小书童13 小时前
用 Cesium 撸了一个森林火情监控大屏,弧线、粒子、发光效果都齐了
前端·javascript
IT_陈寒14 小时前
垃圾回收器选错了,我的Java服务内存炸了
前端·人工智能·后端
月光下的丝瓜14 小时前
Flutter 国内安装指南
前端·flutter
先吃饱再说15 小时前
JavaScript中`this` 的“千层套路”:从默认绑定到箭头函数的五种指向
javascript
玄星啊15 小时前
AI 编程的第 30 天,我怀念古法 Coding 了
前端·ai编程
Jolyne_15 小时前
Angular基础速通
前端·angular.js
foxire15 小时前
基于nodejs实现服务端内核引擎
javascript
锋行天下16 小时前
半秒开!还有谁!!!
前端·vue.js·架构
代码搬运媛17 小时前
git 下中文文件名乱码问题解决
前端
CaffeinePro17 小时前
告别知识点零散!React零基础通关,从环境搭建到Ant Design页面实战
前端·react.js