https://github.com/garfileds/infinitescroll

infinite scroll component with high performance
https://github.com/garfileds/infinitescroll

dom-recycle infinite-scroll

Last synced: about 2 months ago
JSON representation

infinite scroll component with high performance

• Host: GitHub
• URL: https://github.com/garfileds/infinitescroll
• Owner: garfileds
• License: mit
• Created: 2018-04-27T03:52:36.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-01T09:34:57.000Z (over 7 years ago)
• Last Synced: 2025-03-01T02:47:05.493Z (8 months ago)
• Topics: dom-recycle, infinite-scroll
• Language: JavaScript
• Size: 12.7 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# infiniteScroll

infinite scroll component with high performance

## Usage

```js

  import { InfiniteScroll } from 'InfiniteScroll'

  new InfiniteScroll(options)

```

## Options

| name | required | type | description | default |

|:----:|:--------:|:----:|:-----------:|:-------:|

|el    |✔|String|viewport showing content|

|fetch |✔|Function|fetch data|

|render|✔|Function|use fetched data to render an item|

|placeHolder| |Function|loading animation DOM when fetching data|

|perfetchData| |Array|data used in initial phase

|cacheItems| |Number|the number of items above and below the viewport area|50|

|initialitems| |Number|the number of items in the viewport, used when perfetchData is not provided|20|

## Options example

**fetch**

`(requestNum) -> (Promise)`

dd

```js

function fetchData(num){

  const res = []

  while (num--) {

    res.push({

      name: 'doug',

      no: 0

    })

  }

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      resolve(res)

    }, 100)

  })

}

```

**render**

`(data[, div]) -> (domEl)`