参考 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. WPF自定义仪表盘控件

    闲来无事,分享一个仪表盘 源码: 直接复制代码即可运行,=.=! <Window x:Class="TGP.InstrumentationDemo.MainWindow" x ...

  2. Snagit for mac(截图软件)中文版，截个图就是这么容易！

    Snagit for mac是唯一具有内置高级图像编辑和屏幕录制功能的屏幕捕捉软件.它可以轻松抓取图像.文本和影音等多种内容形式,内置强大编辑器,捕捉.编辑一步到位.现为您带来Snagit for m ...

  3. Pycharm相对路径

    问题: 今天有个程序,明显路径是存在的,但是os.path.exists的返回结果是False. 仔细想了想, 是相对路径的问题. 情况描述: 我的路径是: dir_path = 'data/mark ...

  4. D3---01基础的柱状图制作(转)

    ---文章转自 http://d3.decembercafe.org/index.html  ,Created by 十二月咖啡馆. 一个完整的柱形图包含三部分:矩形.文字.坐标轴. 首先要布置一个大 ...

  5. CAGradientLayer简介 实现颜色渐变

    CAGradientLayer使用: CAGradientLayer*gradient = [CAGradientLayerlayer]; gradient.frame = subLayer.fram ...

  6. BZOJ1173 CDQ分治 笔记

    目录 二维数据结构->cdq 预备知识 T1: 二维树状数组 T2:cdq分治 bzoj1176 mokia:Debug心得 一类特殊的CDQ分治 附: bzoj mokia AC代码 二维数据 ...

  7. BZOJ.4144.[AMPPZ2014]Petrol(Kruskal重构树)

    BZOJ 看别人代码的时候发现哪一步都很眼熟,突然想起来,就在四个月前我好像看过还给别人讲过?mmp=v= 果然不写写就是容易忘.写了好歹忘了的时候还能复习呢(虽然和看别人的好像也没多少差别?). 首 ...

  8. ajax经典面试题

    1.什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么是ajax: AJAX是“Asynchronous JavaScript and XML”的缩写.他是指一种创建交互式网页应 ...

  9. JPG、PNG、GIF、SVG 等格式图片区别

    1.图片 2. 前言 首先,我们要清楚的是,图片从类型上分,可以分为 位图 和 矢量图. 位图:位图又叫点阵图或像素图,计算机屏幕上的图是由屏幕上的发光点(即像素)构成的,每个点用二进制数据来描述其颜 ...

  10. NodeJS NPM 镜像使用方法

    每次npm的时候,走国外的镜像,非常的慢,可以配置一下 通过改变默认npm镜像代理服务,以下三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候不用重新配置. 通过config命令 ...