• Stars
    star
    1,451
  • Rank 31,526 (Top 0.7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 7 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Mastering Large Lists with the vue-recyclerview

vue-recyclerview

npm

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 [email protected]: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

More Repositories

1

vue-lazyload

A Vue.js plugin for lazyload your Image or Component in your application.
JavaScript
7,967
star
2

vue-progressbar

A lightweight progress bar for vue
JavaScript
1,458
star
3

vue-zhihu-daily

zhihu daily spa with vue 线上演示在这里 ---->
JavaScript
1,287
star
4

vue-dragging

A sortable list directive with Vue
JavaScript
765
star
5

vue-datepicker

[Deprecated] calendar and datepicker component with material design for Vue.js
Vue
703
star
6

vue-video

A HTML5 video player component for Vue.js
Vue
328
star
7

vue-ssr-hmr-template

Interesting! Vue2 + Webpack2 + HMR + Server Side Render + Express template see demo->
JavaScript
226
star
8

vue-mobile-qq

一个长得像QQ的demo
Vue
221
star
9

vue-vueRouter-webpack-example

a vue webpack example
CSS
212
star
10

vue-slide

A lightweight slide component for vue
JavaScript
208
star
11

weapp-gold

微信小程序的掘金信息流
JavaScript
169
star
12

Qarticles

A lightweight and high performance JavaScript library for creating physical particles
JavaScript
136
star
13

vue-ssr

Use Vue 2.0 Server Side Rendering with Express
JavaScript
93
star
14

zhihu-beautify

beautify your zhihu
CSS
85
star
15

vue-material-blog

a simple blog make by Vue and Material-design-lite
Vue
65
star
16

safari-reaper-demo

HTML
33
star
17

weex-demo

掘金weex版demo
JavaScript
26
star
18

AweSiteChat

A horrible site danmu project base on Vue.js & Wilddog
Vue
21
star
19

vue-audio

A audio player for vue.js
Vue
16
star
20

cov-xss

xss
Vue
9
star
21

cov_localStorageORM

javascript ORM base on Localstorage
JavaScript
8
star
22

CovBookkeeper

vue+echart+express实现的记账web app
JavaScript
4
star
23

weapp-shop

O2O 电商微信小程序
JavaScript
4
star
24

vue-recyclerview-example

vue-recyclerview example
JavaScript
3
star
25

gold-card

nothing here
JavaScript
3
star
26

hatest

A node API testing tool similar to Supertest, based on Axios.
JavaScript
2
star
27

sync-console-server

real time remote debug tool server side
JavaScript
2
star
28

sync-console

realtime remote sync console
JavaScript
2
star
29

koa-server-arm

JavaScript
2
star
30

want-to-eat

使用vue.js做的一个简单material design风格小web app
JavaScript
2
star
31

vue-lazyload-run

vue-lazyload dev
JavaScript
2
star
32

wazi

amaziUI+ajax+PHP online shop
CSS
1
star
33

v8-RuntimeFunctions-list

V8 RuntimeFunctions list
1
star
34

css-rewrite-webpack-plugin

A Webpack plugin to rewrite CSS assets.
JavaScript
1
star
35

cov-rate-limit

A lightweight Rate limiter middleware for Express and Koa. Use to limit repeated requests to public APIs.
JavaScript
1
star
36

xss-demo

xss-demo
Vue
1
star
37

vue-ssr-demo

1
star