vue-recyclerview

Mastering Large Lists with the vue-recyclerview

1,450

121

1,450

View on GitHub View on NPM

Top Related Projects

react-virtualized

26,264

React components for efficiently rendering large lists and tabular data

react-window

15,727

React components for efficiently rendering large lists and tabular data

vue-virtual-scroll-list

4,384

⚡️A vue component support big amount data list with high render performance and efficient.

react-virtuoso

5,216

The most powerful virtual list component for React

Quick Overview

Vue-recyclerview is a high-performance infinite scroll list component for Vue.js. It efficiently renders large datasets by recycling DOM elements, significantly improving performance and memory usage for long lists.

Pros

Excellent performance for rendering large datasets
Efficient memory usage through DOM recycling
Supports both vertical and horizontal scrolling
Easy integration with Vue.js applications

Cons

Limited documentation and examples
May require additional configuration for complex list items
Not actively maintained (last update was in 2019)
Might not be fully compatible with the latest Vue.js versions

Code Examples

Basic usage:

<template>
  <RecyclerView
    :list="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div>{{ item.text }}</div>
  </RecyclerView>
</template>

<script>
import RecyclerView from 'vue-recyclerview'

export default {
  components: { RecyclerView },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        // ...
      ]
    }
  }
}
</script>

Horizontal scrolling:

<template>
  <RecyclerView
    :list="items"
    :item-size="100"
    key-field="id"
    direction="horizontal"
    v-slot="{ item }"
  >
    <div class="horizontal-item">{{ item.text }}</div>
  </RecyclerView>
</template>

Dynamic item sizes:

<template>
  <RecyclerView
    :list="items"
    :item-size="getItemSize"
    key-field="id"
    v-slot="{ item }"
  >
    <div :style="{ height: item.height + 'px' }">{{ item.text }}</div>
  </RecyclerView>
</template>

<script>
export default {
  // ...
  methods: {
    getItemSize(item) {
      return item.height
    }
  }
}
</script>

Getting Started

Install the package:
```
npm install vue-recyclerview
```

Import and use the component in your Vue.js application:

<template>
  <RecyclerView
    :list="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div>{{ item.text }}</div>
  </RecyclerView>
</template>

<script>
import RecyclerView from 'vue-recyclerview'

export default {
  components: { RecyclerView },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        // ...
      ]
    }
  }
}
</script>

Customize the component props and slots according to your needs.

Competitor Comparisons

react-virtualized

26,264

React components for efficiently rendering large lists and tabular data

Pros of react-virtualized

More comprehensive set of components for virtualized rendering
Better documentation and examples
Wider adoption and community support

Cons of react-virtualized

Steeper learning curve due to more complex API
Larger bundle size compared to vue-recyclerview

Code Comparison

vue-recyclerview:

<RecyclerView
  :items="items"
  :itemHeight="50"
  :buffer="200"
>
  <template v-slot:item="{ item }">
    <div>{{ item.name }}</div>
  </template>
</RecyclerView>

react-virtualized:

<List
  width={300}
  height={300}
  rowCount={items.length}
  rowHeight={50}
  rowRenderer={({ index, key, style }) => (
    <div key={key} style={style}>
      {items[index].name}
    </div>
  )}
/>

Key Differences

vue-recyclerview is specifically designed for Vue.js, while react-virtualized is for React applications
react-virtualized offers more customization options and additional components like Grid and Table
vue-recyclerview has a simpler API, making it easier to get started for basic use cases
react-virtualized has better performance optimizations for handling large datasets

Use Cases

Choose vue-recyclerview for simpler Vue.js projects with basic list virtualization needs
Opt for react-virtualized when working on complex React applications requiring advanced virtualization features and flexibility

react-window

15,727

React components for efficiently rendering large lists and tabular data

Pros of react-window

More comprehensive documentation and examples
Supports both fixed and variable size lists/grids
Offers additional features like scrolling to specific items

Cons of react-window

Requires more setup and configuration
Less intuitive API for simple use cases
May have a steeper learning curve for beginners

Code Comparison

vue-recyclerview:

<RecyclerView
  :items="items"
  :item-size="50"
  :buffer="200"
>
  <template v-slot:item="{ item }">
    <div>{{ item.name }}</div>
  </template>
</RecyclerView>

react-window:

<FixedSizeList
  height={400}
  itemCount={1000}
  itemSize={35}
  width={300}
>
  {({ index, style }) => (
    <div style={style}>Item {index}</div>
  )}
</FixedSizeList>

Both libraries aim to improve performance when rendering large lists by only rendering visible items. vue-recyclerview is specifically designed for Vue.js, while react-window is for React applications. react-window offers more flexibility and features, but may require more setup. vue-recyclerview provides a simpler API for basic use cases in Vue.js projects.

vue-virtual-scroll-list

4,384

⚡️A vue component support big amount data list with high render performance and efficient.

Pros of vue-virtual-scroll-list

More actively maintained with recent updates
Better documentation and examples
Supports both fixed and variable height items

Cons of vue-virtual-scroll-list

Slightly more complex implementation
May have a steeper learning curve for beginners

Code Comparison

vue-virtual-scroll-list:

<template>
  <virtual-list :data-key="'id'" :data-sources="items" :data-component="ItemComponent" />
</template>

vue-recyclerview:

<template>
  <RecyclerView :items="items" :item-render="renderItem" />
</template>

Both libraries aim to provide efficient rendering for large lists in Vue applications. vue-virtual-scroll-list offers more flexibility and features, such as support for variable height items and better documentation. However, it may be slightly more complex to implement compared to vue-recyclerview.

vue-virtual-scroll-list is more actively maintained, with recent updates and improvements. This can be crucial for long-term project stability and compatibility with newer Vue versions.

On the other hand, vue-recyclerview might be easier to get started with for beginners due to its simpler API. However, it may lack some advanced features and has been less actively maintained recently.

When choosing between the two, consider your project's specific requirements, the level of customization needed, and your team's familiarity with Vue and virtual scrolling concepts.

react-virtuoso

5,216

The most powerful virtual list component for React

Pros of react-virtuoso

More active development and maintenance
Supports both fixed and variable sized items
Offers more advanced features like grouping and footer

Cons of react-virtuoso

Larger bundle size
Steeper learning curve due to more complex API

Code Comparison

vue-recyclerview:

<RecyclerView
  :items="items"
  :itemHeight="50"
  :prerender="10"
  :remain="10"
>
  <template v-slot:item="{ item }">
    <div>{{ item.text }}</div>
  </template>
</RecyclerView>

react-virtuoso:

<Virtuoso
  style={{ height: '400px' }}
  totalCount={1000}
  itemContent={index => <div>Item {index}</div>}
/>

Key Differences

vue-recyclerview is specifically for Vue.js, while react-virtuoso is for React
react-virtuoso offers more flexibility in terms of item sizing and layout
vue-recyclerview has a simpler API, making it easier to get started with
react-virtuoso provides better performance for large lists with complex items

Use Cases

vue-recyclerview: Simpler Vue.js applications with basic list virtualization needs
react-virtuoso: Complex React applications requiring advanced list virtualization features and optimizations

Both libraries aim to improve performance when rendering large lists, but react-virtuoso offers more features and flexibility at the cost of increased complexity.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of react-virtualized

Cons of react-virtualized

Code Comparison

Key Differences

Use Cases

Pros of react-window

Cons of react-window

Code Comparison

Pros of vue-virtual-scroll-list

Cons of vue-virtual-scroll-list

Code Comparison

Pros of react-virtuoso

Cons of react-virtuoso

Code Comparison

Key Differences

Use Cases

Convert designs to code with AI

README

vue-recyclerview

Feature

Preview

Demo

Requirements

Installation

Direct Download / CDN

NPM

Dev Build

Getting Started

main.js

App.vue

Props Options

Instance Method

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days