参考 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. android---EditText的多行输入框

    <EditText android:id="@+id/edt_order_note_text" android:layout_width="match_parent ...

  2. react native 项目版本升级

    首先说明一下rn项目的一种相当顺滑升级方法: 1.全局安装react-native-git-upgrade npm i -g react-native-git-upgrade 2. 在项目目录下执行命 ...

  3. Python 常用Web框架的比较

    转载来自:https://www.cnblogs.com/sunshine-1/p/7372934.html 从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OL ...

  4. 20165319 Exp6 信息收集与漏洞扫描

    实验过程 whois 在虚拟机Kali的终端输入命令:whois gitee.com,查询码云的域名注册信息. dig或nslookup域名查询 在kali终端输入dig 网址或nslookup 网址 ...

  5. jquery.string.js

    /** * jquery.string - Prototype string functions for jQuery * version: 1.1.0 * (c) 2008-2011 David E ...

  6. Codeforces 939E Maximize! (三分 || 尺取)

    <题目链接> 题目大意:给定一段序列,每次进行两次操作,输入1 x代表插入x元素(x元素一定大于等于之前的所有元素),或者输入2,表示输出这个序列的任意子集$s$,使得$max(s)-me ...

  7. MySql由于编码问题，存储过程执行出错。

    在存储过程后面加了一段话.红色部分 DELIMITER $$ USE `mysql_wispeed01-test1`$$ DROP PROCEDURE IF EXISTS `sp_crebillno` ...

  8. 10-Python入门学习-函数的对象与嵌套、名称空间与作用域、闭包函数

    一.函数的对象 函数是第一类对象,指的是函数名指向的值(函数)可以被当作数据去使用 def func():# func=函数的内地址 print('from func') print(func) ag ...

  9. myeclipse中的HTML页面在浏览器中显示为乱码

    myeclipse中的HTML页面在浏览器中显示为乱码 在通过myeclipse开发项目的过程中,如果用HTML页面书写前端,可能出现中文乱码现象,需要怎么解决呢?下面是我从网上搜的方法: 解决办法: ...

  10. h5软键盘挡住输入框问题解决（android）

    问题 移动端浏览器中的表单在部分android机型上测试,点击靠下的输入框时会遇到弹出的软键盘挡住输入框问题 ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法 ...