hilongjw/vue-recyclerview

Mastering Large Lists with the vue-recyclerview

vue-recyclerview

Mastering Large Lists with the vue-recyclerview

Feature

• DOM recyleing
• Multiple column
• Waterflow

Preview

Demo

https://hilongjw.github.io/vue-recyclerview/

Requirements

Vue 2.0 +

Installation

Direct Download / CDN

https://unpkg.com/vue-recyclerview/dist/vue-recyclerview

unpkg.com provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/vue-recyclerview/dist/vue-recyclerview.js

Include vue-recyclerview after Vue and it will install itself automatically:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-recyclerview/dist/vue-recyclerview.js"></script>

NPM

    $ npm install vue-recyclerview

When used with a module system, you must explicitly install the vue-recyclerview via Vue.use():

import Vue from 'vue'
import VueRecyclerviewNew from 'vue-recyclerview'

Vue.use(VueRecyclerviewNew)

You don't need to do this when using global script tags.

Dev Build

You will have to clone directly from GitHub and build vue-recyclerview yourself if you want to use the latest dev build.

$ git clone git@github.com:hilongjw/vue-recyclerview.git node_modules/vue-recyclerview
$ cd node_modules/vue-recyclerview
$ npm install
$ npm run build

Getting Started

We will be using ES2015 in the code samples in the guide.

main.js

// If using a module system (e.g. via vue-cli), import Vue and RecyclerView and then call Vue.use(RecyclerView).
// import Vue from 'vue'
// import RecyclerView from 'vue-recyclerview'
// import App from './App.vue'
// Vue.use(RecyclerView)

// Now the app has started!
new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <RecyclerView
      :prerender="30"
      style="height: calc(100vh - 50px)"
      :fetch="MiFetch" 
      :item="MiItem" 
      :tombstone="MiTomstone"
    ></RecyclerView>
  </div>
</template>

<script>
import MiItem from './MiItem.vue'
import MiTomstone from './MiTombstone.vue'
import MiFetch from './mi-fetch'

export default {
  name: 'app',
  data () {
    return {
      MiFetch,
      MiItem,
      MiTomstone
    }
  }
}
</script>

Full example code

Props Options

key	description	defualt	type/options
fetch	Data fetching function
list	List data of RecyclerView	[]
prerender	Number of items to instantiate beyond current view in the opposite direction.	20	Number
remain	Number of items to instantiate beyond current view in the opposite direction.	10	Number
column	Specifies how many columns the listings should be displayed in	1	Number
item	The Vue component of RecyclerView's item		Vue component
tombstone	The Vue component of RecyclerView's tombstone		Vue component
loading	The loading component behind the RecyclerView pull-to-refresh	built-in loading	Vue component
options	advanced options	-	Object

• fetch:Function

function fetch (limit:Number, skip:Number) {
  return Promise.resolve({
    list: list // Array,
    count: count // Number
  })
}

• list

[
// item
{
  vm: vm, // <Vue Instance>
  data: {
    name: 'test'
  },
  node: null,
  height: 100,
  width: 100,
  top: 0,
}, 
// tombstone
{
  vm: null
  data: null,
  node: null,
  height: 100,
  width: 100,
  top: 0,
}]

• options

<RecyclerView 
ref="RecyclerView"
key="wechat"
class="recyclerview-container wechat" 
:fetch="wechatFetch" 
:item="ChatItem" 
:tombstone="Tombstone"
:prerender="10"
:remain="10"
:options="wechatOptions"
@inited="initScrollToBottom"
></RecyclerView>

data () {
  return {
    wechatOptions: {
      reuseVM: true,
      usePrefix: true,
      props: {
        color: {
          value: ''
        }
      }
    }
  }
}

default:

const options = {
  preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|IMG)$/ },
  distance: 50,
  animation_duration_ms: 200,
  tombstone_class: 'tombstone',
  invisible_class: 'invisible',
  prerender: 20,
  remain: 10,
  preventDefault: false,
  column: 1,
  waterflow: false,
  cacheVM: 0,
  reuseVM: false,
  usePrefix: false,
  props: {}
}

Instance Method

• scrollToIndex

this.$refs.RecyclerView.scrollToIndex(100)

License

MIT

the project inspired by infinite-scroller