vue-virtual-infinite-scroll

a vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh.

• Based on Iscroll, support iscroll configure options

• Reuse the DOM element to get high performance in big data list

• Support fixed height and variable height.

• Support bottom loadmore and pulldown refresh event

Demo

https://zuolei828.github.io/virtual-scroll/

uncheck the virtual scroll means a normal big data list not use our component. It is used for performance comparison.

How to use

npm install vue-virtual-infinite-scroll --save

import virtualScroll from 'vue-virtual-infinite-scroll'
import 'vue-virtual-infinite-scroll/dist/css/vue-virtual-infinite-scroll.css'

Vue.component('virtual-list', virtualScroll)

<template>
    <div class="demo">
      <virtual-list ref="scroller" :items="items" uniqueKey="id" :iscrollOptions="options" :variable="variable" :infinite="true" :pulldown="true" @loadMore="getMoreData" @pullRefresh="refreshData">
        <template slot="content" slot-scope="props">
          <div class="demo-item">
            <span>
              {{props.item.text}}
            </span>
            <img src="./assets/demo.jpeg" />
          </div>
        </template>
      </virtual-list>
    </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      items: [],
      options: {
        scrollbars: true,
        interactiveScrollbars: true,
        probeType: 3,
        mouseWheel: true,
        mouseWheelSpeed: 1
      },
      variable: false
    }
  },
  created () {
    let list = []
    for (let i = 0; i < 100; i++) {
      list.push({
        text: i,
        id: i,
        height: Math.max(Math.floor(Math.random() * 50), 20)
      })
    }
    this.items = list
  },
  methods: {
    getMoreData ($stateChange) {
      if (this.items.length > 1000) {
        $stateChange('complete')
      } else {
        setTimeout(() => {
          let length = this.items.length
          for (let i = length; i < length + 20; i++) {
            this.items.push({
              text: i,
              id: i,
              height: Math.max(Math.floor(Math.random() * 50), 20)
            })
          }
          $stateChange('loaded')
        }, 1500)
      }
    },
    refreshData ($pullStateChange) {
      setTimeout(() => {
        this.items.splice(0)
        for (let i = 0; i < 50; i++) {
          this.items.push({
            text: i,
            id: i,
            height: Math.max(Math.floor(Math.random() * 50), 20)
          })
        }
        $pullStateChange('complete')
      }, 1500)
    },
  }
</script>
<style lang="postcss">
  .demo {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 10px;
    right: 10px;
  }
</style>

Notice

1. You should init the items array during your own component created function before the vue-virtual-infinite-scroll component created.
2. You should put the vue-virtual-infinite-scroll component during a parent component, and set a css position property(relative, absolute or fixed) to the parent component.

Prop Configures

Prop | Type | Required | Default | Description | :--- | :--- | :--- | :--- | :--- | | items | Array | ✓ | [] |The list expected to render, each item in the list should contain id arrtibute for the unique identify, and in variable height mode, it should also contain height attribute with a string or number value. eg: [{ id: 1, height: 40 }, { id:2, height: 50 }] | | uniqueKey | String | ✓ | 'id' | The unique key for each list item | | iscrollOptions | Object | * | {} | The iscroll configure options. http://iscrolljs.com/#configuring | | variable | Boolean | * | false | Define the height mode of list item. If false, the component will get the item height automatically. If true, you should set the 'height' property to each item in the prop 'items' | | bufferSize | Number | * | 5 | Define the top and bottom buffer item size. It is used to cache the scoll item out of the visable component area, the larger the bufferSize, the higher the scroll performance will achieved. | | infinite | Boolean | * | false | True means you want to use the loadMore function when the component scolled to the bottom | | distance | Number | * | 50 | The loadMore infinite function will be called when scrolled into the distance value from bottom | | loadMore | Function | * | | The custom function called when prop infinite is true and component scrolled into the distance value from bottom. It has a callback param which can controll the loader state(see the How to use) | | pulldown | Boolean | * | false | True means you want to use the pullRefresh function when the component pulled out of the top boundary | | pullRefresh | Function | * | | The custom function called when prop pulldown is true and the component pulled out the top boundary and released. It has a callback param which can controll the puller state(see the How to use) | | pulldownText | Object | * | { begin: '下拉刷新',trigger: '释放更新',refresh: '更新中...',complete: '更新完成',error:'更新失败'} | The custom text object used to show in pull refresh |

Slot Configures

Slot | Description | :--- | :--- | | content | each list item content | infiniteLoader | the bottom infinite loader