v-scrolljs

Infinite scroll list for Vue.js.

Demo

Installation

npm install -S v-scrolljs

Import

import VScrolljs from 'v-scrolljs'
import 'v-scrolljs/dist/static/css/v-scrolljs.css'

export default {
  ...
  components: {
    scroll: VScrolljs,
  },
  ...
}

Usage

<template>
  <div>
    ...
      <scroll :list="items" :fetch="fetchItem" :total="page.total" :offsetItems="30">
          <template slot="tombstone" slot-scope="props">
              <div style="height: 50px;">loading....</div>
          </template>

          <template slot="item" slot-scope="props">
              <div style="border-bottom: 1px solid #eee;padding:10px 20px;word-break: break-all;">
                  <b>{{props.index}}&nbsp;&nbsp;</b>
                  <span>{{props.data}}</span>
              </div>
          </template>
          <template slot="bottom">
                All loaded
          </template>
      </scroll>
    ...
  </div>
</template>

<script>
import VScrolljs from 'v-scrolljs.js'
import 'v-scrolljs/dist/static/css/v-scrolljs.css'
const MESSAGES = [
    'data1',
    'data2',
    'data3',
]
export default {
    name: 'App',
    components: {
        scroll: VScrolljs
    },
    data () {
        return {
            items: [],
            page: {
                total: 3,
                pageSize: 200,
                pageNumber: 1
            }
        }
    },
    methods: {
        fetchItem () {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    const items = MESSAGES.slice(this.items.length, this.items.length + this.page.pageSize)
                    for (var i = 0; i < items.length; i++) {
                        this.items.push(items[i])
                    }
                    resolve()
                }, 300)
            })
        }
    }
}
</script>

Options

| Directive | Type | Default | | | --------- | ---------| -------- | ------------------------------------------------------------------------- | | list | Array | required | List of items | | total | Number | 1 | The number of total list | | offsetItems | Number | 20 | Number of additional nodes loaded outside the visual area | | fetch | Function | false | The function of loading more items(async function) | | resize | Boolean | false | recalculate the height of each item When the resize event is triggered | | itemHeight | Number | 0 | Setting each item to the same height will reduce unnecessary calculations.|

Development

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build