无限滚动加载数据

在对大量数据进行展示时，最常用的一类组件就是列表。在之前，当列表数据过多时，往往会对数据进行分页展示，这种方式好处在于每页大小固定，占用内存极少，同时方便快速定位信息位置，而这种方式的缺点是会打断用户浏览的连贯性，也会增加用户等待时间。而另一种方式是无限滚动。无限滚动实现原理其实很简单，就是当用户即将滚动到页面底部时，就自动通过 ajax 请求下一页的内容，然后渲染在页面上，从而实现几乎无缝的浏览体验。缺点在于列表页过长时，占用内存比较多，同时难以定位信息的位置。

源码版

当mounted方法执行时，调用load方法，在load中计算当前窗口底部到文档底部的距离，如果距离小于150px，则调用getList方法加载数据，然后重新计算距离。此时要注意页面高度不足时，需要循环调用getList方法获取数据，以达到可以滚动的高度。

插件版(vue)

目前npm上有许多插件可以实现无限滚动的效果，比较有代表性的有vue-infinite-scroll、vue-infinite-loading、better-scroll。下文将会以vue-infinite-scroll为例介绍这类插件用法

安装

npm i vue-infinite-scroll

全局注册

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

局部注册

import infiniteScroll from 'vue-infinite-scroll'

export default {
  directives: {
    infiniteScroll
  }
}

基本用法

template

  

    
{{ item }}
  

如果要实现在特定区域进行滚动，可以为滚动区域的祖先结点设置高度和宽度

script

loadMore: function() {
  this.busy = true
  setTimeout(() => {
    for (var i = 0, j = 10; i < j; i++) {
      this.data.push({ name: this.count++ })
    }
    this.busy = false
  }, 10)
}

API

选项	说明
infinite-scroll-disabled	Boolean值，是否执行回调函数，true为不执行
infinite-scroll-distance	Number值，默认为0。元素底部距离视口底部之间的最小距离，小于这个距离会执行回调函数
infinite-scroll-immediate-check	Boolean值，默认为true。是否在指令绑定时立即执行一次，假如你的初始内容高度不够，不足以填满可滚动的容器的话，应设为true
infinite-scroll-listen-for-event	当Vue实例触发事件后重新检查
infinite-scroll-throttle-delay	Number，默认为200(ms)。两次检查的时间间隔

插件版(react)

插件安装

yarn add react-infinite-scroll-component

使用

} height={400} endMessage={

没有更多了~

} > {data.map((item) => ( ))}

API

选项	说明
next	Function，当滚动到底部时的执行的回调函数
hasMore	Boolean，是否有更多数据
dataLength	Number，设置数据长度
loader	加载中过程中显示的内容
endMessage	所有内容加载完成后的内容