xtongs / Vue Recyclist
Licence: mit
Infinite scroll list for Vue.js with DOM recycling.
Stars: ✭ 259
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Recyclist
angular2-infinite-scroll
Infinite Scroll Directive For Angular (version 2 up to 2.3.1)
Stars: ✭ 16 (-93.82%)
Mutual labels: infinite-scroll
react-simple-infinite-loading
A list that infinitely loads content as user scrolls down in React
Stars: ✭ 56 (-78.38%)
Mutual labels: infinite-scroll
react-tabllist
React-based customizable style table or list components that support event and callback functions.
Stars: ✭ 20 (-92.28%)
Mutual labels: infinite-scroll
el-table-infinite-scroll
Infinite scroll for el-table.
Stars: ✭ 81 (-68.73%)
Mutual labels: infinite-scroll
InfiniteCarousel
💈Infinite Carousel Collection View
Stars: ✭ 67 (-74.13%)
Mutual labels: infinite-scroll
react-infinite-scroll-list
Manage infinite list with the IntersectionObserver API
Stars: ✭ 20 (-92.28%)
Mutual labels: infinite-scroll
Nibriboard
🖼 An infinite whiteboard for those big ideas. Currently unstable and in alpha.
Stars: ✭ 15 (-94.21%)
Mutual labels: infinite-scroll
react-bidirectional-infinite-scroll
Bidirectional infinite scroll written using react
Stars: ✭ 31 (-88.03%)
Mutual labels: infinite-scroll
ng-mat-select-infinite-scroll
Infinite Scroll directive for angular material select component
Stars: ✭ 39 (-84.94%)
Mutual labels: infinite-scroll
vue-virtual-scroll-grid
A Vue 3 component that can render a list with 1000+ items as a grid in a performant way.
Stars: ✭ 64 (-75.29%)
Mutual labels: infinite-scroll
react-example-paginated-list-infinite-scroll
Follow a React tutorial series with three parts to build a powerful component in React.
Stars: ✭ 43 (-83.4%)
Mutual labels: infinite-scroll
react-native-paginated-listview
A simple paginated react-native ListView with a few customization options
Stars: ✭ 14 (-94.59%)
Mutual labels: infinite-scroll
react-native-bidirectional-infinite-scroll
📜 React Native - Bidirectional Infinite Smooth Scroll
Stars: ✭ 137 (-47.1%)
Mutual labels: infinite-scroll
InfiniteScrollRecyclerView
Enables the RecyclerView to Auto scroll for indefinite time.
Stars: ✭ 49 (-81.08%)
Mutual labels: infinite-scroll
ScrollAnimationShowcase
[ING] - UIScrollViewやUICollectionViewの特性を活用した表現サンプル
Stars: ✭ 15 (-94.21%)
Mutual labels: infinite-scroll
react-cool-virtual
😎 ♻️ A tiny React hook for rendering large datasets like a breeze.
Stars: ✭ 1,031 (+298.07%)
Mutual labels: infinite-scroll
Endless
🛣 A lightweight endless pageControl based on CAShapeLayers and UICollectionView
Stars: ✭ 19 (-92.66%)
Mutual labels: infinite-scroll
iOSEasyList
A data-driven UICollectionView and UITableView framework for building fast and flexible lists
Stars: ✭ 29 (-88.8%)
Mutual labels: infinite-scroll
Pageable
An easy way to Pagination or Infinite scrolling for TableView/CollectionView
Stars: ✭ 44 (-83.01%)
Mutual labels: infinite-scroll
vue-recyclist (not maintained)
Infinite scroll list for Vue.js (v2.1+) with DOM recycling.
Demo
Installation
npm install -D vue-recyclist
Import
import VueRecyclist from 'vue-recyclist'
export default {
...
components: {
VueRecyclist,
},
...
}
or
<script src="/path/to/vue-recyclist/dist/vue-recyclist.js"></script>
Usage
<template>
<div>
...
<vue-recyclist
:list = "list"
:tombstone = "tombstone"
:size = "size"
:offset = "offset"
:loadmore = "loadmore"
:spinner = "spinner"
:nomore = "nomore">
<!-- tombstone slot -->
<template slot="tombstone" scope="props">
...
</template>
<!-- item slot -->
<template slot="item" scope="props">
...
</template>
<!-- loading spinner -->
<div slot="spinner">Loading...</div>
<!-- end of list -->
<div slot="nomore">No More Data</div>
</vue-recyclist>
...
</div>
</template>
<script>
import VueRecyclist from 'vue-recyclist'
export default {
data() {
...
},
components: {
'vue-recyclist': VueRecyclist
},
methods: {
loadmore() {
// Fetch more items
...
}
}
}
</script>
Options
Directive | Type | Default | |
---|---|---|---|
list | Array | required | List of items |
tombstone | Boolean | false | Whether to show tombstones |
size | Number | 10 | The number of items added each time |
offset | Number | 200 | The number of pixels of additional length to allow scrolling to |
loadmore | Function | required | The function of loading more items |
spinner | Boolean | true | Whether to show loading spinner |
nomore | Boolean | false | Whether to show 'no more data' status bar |
Development
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].