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

相关推荐
Dragon Wu5 分钟前
前端框架 react 性能优化
前端·javascript·react.js·性能优化·前端框架·react
Gungnirss28 分钟前
前后端分离,后端拦截器无法获得前端请求的token
java·前端·token
五秒法则42 分钟前
从搭建uni-app+vue3工程开始
前端·vue.js·uni-app
风之舞_yjf1 小时前
css基础(27)_行内、行内块元素之间的空白问题
前端·css
Kika写代码1 小时前
【基于轻量型架构的WEB开发】课程 第14章 SSM框架整合 Java EE企业级应用开发教程 Spring+SpringMVC+MyBatis
前端·架构·java-ee
WuMingf_1 小时前
CSS基础
前端·css
白水4651 小时前
基于官网的Vue-router安装(2024/11)
前端·vue.js·vue
白墨阳1 小时前
vue3:scss引用
前端·css·scss
小小优化师 anny1 小时前
纯CSS 写的一个树状触摸菜单
前端·css·css3
努力小贼1 小时前
Vue小项目(开发一个购物车)
前端·javascript·vue.js