参考 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. PHP左侧菜单栏的管理与实现

    以thinkPHP5.0为例 后台config.php文件里配置 //配置文件设置菜单内容属性 'menu' => [ [ 'name' => '菜单栏1', 'url' => '/ ...

  2. kafka常规及几个重要的操作命令

    1. 查看所有topic kafka-topics.sh --zookeeper hadoop3 --list 2. 创建tooic及topic的partitioner ./kafka-topics. ...

  3. mysql免解压版的配置

    很多朋友在安装mysq解压版l时出现: “mysql 服务无法启动 服务没报告任何错误” 以前我安装时也是遇到这样的问题: 其实mysql在5.6后就没有了data目录,很多朋友按照以前的版本安装会去 ...

  4. GDB 调试 C++ 程序 core dump

    https://blog.csdn.net/yockie/article/details/51973740

  5. JSTree如何实现第二级菜单异步从数据库读取。

    参考文档: https://www.cnblogs.com/luozhihao/p/4679050.html http://jsfiddle.net/vakata/2kwkh2uL/5/ 核心的关键点 ...

  6. python-MYSQL（包括ORM）交互

    1.首先,我们必须得连上我们的MYSQL数据库.个人遇到连不上MYSQL数据的问题主要有:数据库的权限问题.数据库表权限的问题 同时获取数据库中的数据等. //==================== ...

  7. VB生成条形码(EAN-13)

    14年给别人写的一个库存软件,用到扫码枪,所以就有了这个类. 编码规则相对简单,详见百度百科EAN-13 示例运行效果如下: 类模块:cEAN13.cls Option Explicit '★━┳━━ ...

  8. 12-JSP&EL&JSTL

    JSP & EL & JSTL jsp Java Server Page 什么是jsp 从用户角度看待 ,就是是一个网页 , 从程序员角度看待 , 其实是一个java类, 它继承了se ...

  9. 搭建正则开源工具Regexper

    一.Regexper简介 Regexper是一款正则可视化开源工具,直接输入正则表达式就能用可视化显示出来,方便的检测我们书写的正则是否正确. 二.Regexper地址在线版:https://rege ...

  10. Docker安装及基本操作

    系统环境 CentOS Linux release 7.5.1804 (Core) 安装依赖包 更新系统软件 yum update 安装docker yum install docker 启动dock ...