参考 https://www.jianshu.com/p/0a3aebd63a14

一个需要判断的地方就是加载中再次触发滚动的时候，不要获取数据。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>列表无限加载</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    li {

      height: 50px;

      border-bottom: 1px solid #c7c7c7;

      list-style: none;

      line-height: 50px;

      padding-left: 30px;

    }

  </style>

</head>

<body>

  <div id="unlimitedList">

    <ul>

      <li v-for="item in list">{{ item }}</li>

      <li :style="{display: loading ? 'initial' : 'none'}">Loading......</div>

    </ul>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

  <script>

    function fetch(from, size = 20) { // 模拟后台获取数据

      console.log('获取数据 传入: ', { from, size });

      let data = [];

      let total = 98;

      size = Math.min(size, total - from + 1);

      for (let i = 0; i < size; i++) {

        data.push(`列表项${from + i}`);

      }

      let ret = { data, total };

      return new Promise(function (resolve, reject) {

        setTimeout(() => {

          console.log('获取数据 返回: ', ret);

          resolve(ret);

        }, 500);

      })

    }

    new Vue({

      el: '#unlimitedList',

      data: {

        list: [],

        loading: true,    // 数据加载中

        allLoaded: false  // 数据已经全部加载

      },

      methods: {

        getData() {

          this.loading = true; // 显示加载中的标识

          fetch(this.list.length + 1).then(res => {

            this.list.splice(this.list.length, 0, ...res.data); // 将新获取到的数据连接到 this.list (vue 能检测到 splice() 函数

            this.loading = false; // 加载结束 取消加载中显示

            if (this.list.length === res.total) {

              this.allLoaded = true;

            }

          })

        },

        onScroll(e) {

          if (this.loading || this.allLoaded) return;

          let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离

          let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 浏览器视口的高度

          let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文档的总高度

          if (top + vh >= height) { // 滚动到底部

            this.getData(); // 如果已经滚到底了 获取数据

          }

        }

      },

      created() {

        this.getData();

        window.addEventListener('scroll', this.onScroll);

      },

      destroyed () {

        window.removeEventListener('scroll', this.onScroll);

      }

    })

  </script>

</body>

</html>

Vue中实现一个无限加载列表的更多相关文章

  1. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

  2. vue实现pc端无限加载功能

    主要思路通过自定义指令,在视图初始化完成后,绑定scroll事件.当scrollTop + clientHeight >= scrollHeight时(此时滚定条到了底部)触发loadMore事 ...

  3. Vue中router路由异步加载组件-优化性能

    何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加 ...

  4. 一个无限加载瀑布流jquery实现

    实现大概是下面的效果,写了比较详细的注释 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  5. Vue.js 开发实践：实现精巧的无限加载与分页功能

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...

  6. Qt实现小功能之列表无限加载

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  7. Qt实现小功能之列表无限加载（创意很不错：监听滚动条事件，到底部的时候再new QListWidgetItem）

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  8. WP8.1开发中ListView控件加载图列表的简单使用（1）

    我也是刚接触WP编程没几个月,就是在这段时间一直闲着没事,然后又比较喜欢WP这款系统,就学习了WP这方面的开发言语,自学是很困难的,掌握这方面的资料不多,很初级,就是自己在网上找资料学习过程中,看到别 ...

  9. vue项目中主要文件的加载顺序（index.html、App.vue、main.js）

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

随机推荐

  1. pg 生成数据字典

    select (select relname||'--'||(select description from pg_description where objoid=oid and objsubid= ...

  2. webpack4与babel配合使es6代码可运行于低版本浏览器

    使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel7转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const ...

  3. Snakes 的 Naïve Graph

    题解: 首先分析一下这个问题 发现等价于是求n之内与n互素的数的个数,即欧拉函数 这个可以线性筛 但发现还应该减去$x^2==1$的情况 这个东西不是那么好处理 考虑用中国剩余定理拆 因为$p1^{a ...

  4. Ubuntu 下使用 Nginx 部署 .NET Core 2.0 网站

    前言 本文介绍如何在 Ubuntu 16.04 服务器上安装 .NET Core 2.0 SDK.创建项目与发布,并使用 Nginx 部署 .NET Core 2.0 Web 项目. 安装 .NET ...

  5. Jmeter性能测试报告扩展

    自动收集采集结果:运行完毕后,自动出结果:

  6. 做IT，必备的安全知识！

    以前的认知 以前刚接触IT行业,而我身为运维,我以为我所需要做的安全就是修改服务器密码为复杂的,ssh端口改为非22,还有就是不让人登录服务器就可以保证我维护的东西安全. 现在的认知 工作也好几年了, ...

  7. Py之Crawler：利用python的爬虫功能实现从各种网站上（以百度贴吧为例）获得你喜欢的照片下载到本地电脑上——Jason niu

    import urllib.requestimport re import os def open_url(url): req=urllib.request.Request(url) req.add_ ...

  8. 小程序开发过程中常见问题[微信小程序、支付宝小程序]

    目录 一.样式中如何使用background-image呢? 二.使用自适应单位rpx类似于rem,布局尽量使用flex布局 三.万能的{{双大括号,用于在模版中输出变量 四.你想要的基础组件和API ...

  9. STM8L052低功耗模式

    Stm8L系列单片机的低功耗有五种模式: § wait模式 § Lowpower run模式 § Lowpower wait模式 § Active-haltwith full RTC模式 § Halt ...

  10. 爬虫之selenium和PhantomJS

    ---恢复内容开始--- selenium selenium是什么? 是Python的一个第三方库,对外提供的接口可以操作浏览器,然后让浏览器完成自动化的操作 环境搭建 .安装: pip instal ...