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

源码版

<template>
  <div id="app">
    <div>
      <div v-for="(item, i) of list" :key="i">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      pagesize: 10,
      pagenum: 1,
      list: []
    }
  },
  methods: {
    throttle(func, wait) {
      let lastTime = null
      let timeout
      return () => {
        let context = this
        let now = new Date()
        let arg = arguments
        if (now - lastTime - wait > 0) {
          if (timeout) {
            clearTimeout(timeout)
            timeout = null
          }
          func.apply(context, arg)
          lastTime = now
        } else if (!timeout) {
          timeout = setTimeout(() => {
            func.apply(context, arg)
          }, wait)
        }
      }
    },
    getList() {
      return new Promise(resolve => {
        setTimeout(() => {
          this.list.push({
            title: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
            content:
              'Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias modi deserunt quisquam, voluptatibus nisi quibusdam aliquid deleniti maiores mollitia quos dignissimos laudantium eveniet atque illo officiis aspernatur culpa! Accusamus, a? Lorem ipsum dolor sit ametconsectetur adipisicing elit. Eligendi sed quia quos magnam odio. Repudiandae dolores doloremque deleniti asperiores quibusdamexercitationem dicta quae iure accusamus totam mag'
          })
          resolve()
        }, 50)
      })
    },
    async load() {
      let distance = document.documentElement.scrollHeight - document.documentElement.scrollTop - window.innerHeight
      while (distance < 150) {
        this.pagenum++
        await this.getList()
        distance = document.documentElement.scrollHeight - document.documentElement.scrollTop - window.innerHeight
      }
    }
  },
  mounted() {
    this.load()
    window.addEventListener('scroll', this.throttle(this.load, 200))
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('scroll', this.load)
    })
  }
}
</script>

当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

<div style="height:400px;overflow:auto;">
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="(item, i) of data" :key="i">{{ item }}</div>
  </div>
</div>

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

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

插件版(react)

插件安装

yarn add react-infinite-scroll-component

使用

<InfiniteScroll
  dataLength={data.length}
  next={getList}
  hasMore={data.length < total}
  loader={
    <div className="grid-full-width" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <Spin />
    </div>
  }
  height={400}
  endMessage={
    <div className="grid-full-wdith end-message" style={{ textAlign: 'center' }}>
      没有更多了~
    </div>
  }
>
  {data.map((item) => (
    <Card
      key={item.id}
      data={item}
    />
  ))}
</InfiniteScroll>

API