参考 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. [转] iphoneX、iphoneXS、iphoneXSMax、iphoneXR适配

    基础知识 1. 关于iphoneX .iphoneXS.iphoneXSMax.iphoneXR机型的大小和像素   机型尺寸 注意:开发人员只需要记住开发尺寸 2. 屏幕组成 齐刘海(44px) + ...

  2. 西风 West Wind Html帮助构建器

    https://helpbuilder.west-wind.com/ 示例文档: https://helpbuilder.west-wind.com/docs/_03101e5wp.htm

  3. docker 安装mysql

    1.安装docker 参见这个文章第一步:https://www.cnblogs.com/yanglei-xyz/p/10600707.html 2.安装mysql 查找Docker Hub上的mys ...

  4. POJ 3268 (dijkstra变形)

    题目链接 :http://poj.org/problem?id=3268 Description One cow from each of N farms (1 ≤ N ≤ 1000) conveni ...

  5. 我的第一个.NET Core App Windows系统

    一.前言 本篇开发环境?1.操作系统: Windows 10 X642.SDK: .NET Core 2.0 Preview 二.安装 .NET Core SDK 1.下载 .NET Core下载地址 ...

  6. ZOJ 3876 JAVA

    题意: 输入年份,求五一假期一共放多少天假.五一假期默认5天,如果5月1号星期一,那么它之前有星期六星期天两天假期, 假期总长度就变成5+2,五一假期结束第二天也需要判断是不是假期. 思路: 使用Ja ...

  7. js初学练手：Csdn Ads Cleaner

    最新版本在这里哒:https://greasyfork.org/zh-CN/scripts/376621-csdn-ads-cleaner 隔壁csdn的广告太猖獗啦!写个js管管它 需配合Tempe ...

  8. linux去除\r（window中编辑的文本）

    vim -b file 二进制贷款文件:%s/^M//g         # 注意这里使用Ctrl+V+M输入^M 上面的方法我就不行,但是下面的可以: 如果不行可以使用 :%s/\r//

  9. BZOJ1991 : Pku2422 The Wolves and the Sheep

    将每个不是障碍的格子标号,设三只狼的位置分别为$A,B,C$,羊的位置在$D$.合法状态中强行限制$A<B<C$,这样状态数只有$\frac{n^8}{6}\approx 1.6\time ...

  10. 超时导致的Galera节点加入集群失败

    需求:为galera集群添加新的节点. 初始化新的节点,加入的时候一直报错,加入失败,报错日志如下 WSREP_SST: [ERROR] Removing /var/lib/mysql//.sst/x ...