安装和下载：

# NPM
$ npm install vue-list-scroller --save

一个具有无限滚动支持的Twitter feed样式垂直列表滚动器。

该组件利用ResizeObserver API确定屏幕尺寸并自动调整不同设备上的内容的大小。

变更日志：

v1.1.0（07/07/2020）

• 通知项目组件有关调整大小

如何使用它：

1.导入vue-list-scroller组件。

import ListScroller from 'vue-list-scroller'

2.将<list-scroller />组件添加到应用程序。

<list-scroller 
  :item-component="item" 
  :items-data="items" 
  :item-height="350" 
  class="list" 
  @bottom="addMore" />

3.创建项目模板。

<template id="list-item">
  <div class="item">
    <img :src="imgUrl" />
    <div>
      <h1><b>Item {{ index }}</b></h1>
      {{ ' ' + data.text }}
    </div>
  </div>
</template>

4.启用列表滚动器。做完了

Vue.component('list-item', {
  template: '#list-item',
  props: {
    data: Object,
    index: Number,
  },
  computed: {
    imgUrl() {
      return `https://picsum.photos/id/${this.data.img}/500/200`
    },
  },
});

const lorem =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
  'Phasellus mattis at neque eu venenatis. Nam et sodales purus. ' +
  'Suspendisse pulvinar nisl purus, vel consequat neque varius vel. ' +
  'Ut ut consequat lorem. Nulla odio arcu, porta eu fringilla id, ' +
  'porta eget massa. Vivamus porta pulvinar ex, vel egestas erat ' +
  'rutrum vitae. Cras at felis malesuada, lacinia nulla non, ' +
  'tincidunt ligula. Sed facilisis mauris et metus commodo, ' +
  'sit amet porttitor mi efficitur. Cras et accumsan eros. Ut ' +
  'facilisis venenatis quam a luctus. Nam egestas dignissim viverra. ' +
  'Curabitur volutpat, enim et luctus faucibus, ex nisl ultrices est, ' +
  'in faucibus sapien libero vel arcu. Nullam placerat, mauris id ' +
  'vestibulum sollicitudin, lacus leo finibus mauris, nec efficitur ' +
  'neque ex sit amet arcu'

new Vue({
  el: "#app",
  data: { 
      items: [],
      item: Vue.component('list-item'),
  },
  methods: {
    addMore() {
      if (this.items.length > 10000) return

      for (let i = 0; i < 30; i++) {
        this.items.push({
          text: lorem.slice(0, 200 + Math.floor(Math.random() * 500)) + ' ...',
          img: Math.floor(Math.random() * 1000),
        })
      }
    },
  },
  created() {
    this.addMore()
  },
})

5.所有可能的props。

// 传递给项的数据数组
itemsData: { type: Array, required: true },
// 物体的大致高度(在第一次渲染时使用)
itemHeight: { type: Number, required: true },
// Vue js item component
itemComponent: { type: [Object, Function], required: true },
// Height of rendered part relative to viewport height
renderViewports: { type: Number, default: 3 },