https://github.com/dwqs/react-virtual-list

A tiny virtualization list component(gzipped 6KB), supports dynamic height: https://dwqs.github.io/react-virtual-list/
https://github.com/dwqs/react-virtual-list

dynamic-height react react-list react-virtualized variable-height virtual virtual-list virtualization

Last synced: 6 days ago
JSON representation

A tiny virtualization list component(gzipped 6KB), supports dynamic height: https://dwqs.github.io/react-virtual-list/

• Host: GitHub
• URL: https://github.com/dwqs/react-virtual-list
• Owner: dwqs
• License: mit
• Created: 2018-09-25T10:19:25.000Z (about 6 years ago)
• Default Branch: develop
• Last Pushed: 2018-11-18T09:26:25.000Z (almost 6 years ago)
• Last Synced: 2024-10-26T02:34:31.421Z (13 days ago)
• Topics: dynamic-height, react, react-list, react-virtualized, variable-height, virtual, virtual-list, virtualization
• Language: JavaScript
• Homepage:
• Size: 777 KB
• Stars: 46
• Watchers: 5
• Forks: 13
• Open Issues: 3
• Metadata Files:
  • Readme: README-CN.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![npm-version](https://img.shields.io/npm/v/@dwqs/react-virtual-list.svg?style=for-the-badge) ![license](https://img.shields.io/github/license/dwqs/react-virtual-list.svg?style=for-the-badge) ![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=for-the-badge) [![travis-ci](https://img.shields.io/badge/ci-travis-green.svg?style=for-the-badge)](https://travis-ci.org/dwqs/react-virtual-list)

# react-virtual-list

A tiny virtualization list component, supports dynamic height.

>注意: 由于在 iOS UIWebviews 中，`scroll` 事件是在滚动停止之后触发的，所以不兼容iOS UIWebviews。[了解更多](https://developer.mozilla.org/en-US/docs/Web/Events/scroll#Browser_compatibility)

## 安装

通过 npm 或者 yarn 均可:

```shell

// npm

npm install @dwqs/react-virtual-list --save

// yarn

yarn add @dwqs/react-virtual-list

```

## 基本使用

```js

import React, { Component } from 'react'

import VirtualizedList from '@dwqs/react-virtual-list'

export default class Hello extends Component {

  constructor (props) {

    super(props)

    this.data = [{

      id: 1,

      val: Math.random()

    }, {

      id: 2,

      val: Math.random()

    }, {

      id: 3,

      val: Math.random()

    }, ...]

    this.renderItem = this.renderItem.bind(this)

  }

  renderItem ({index, isScrolling}) {

    const item = this.data[index]

    return (

      
#{index}, {item.val}

    )

  }


  render () {

    return (

      

    )

  }

}

```

在线的 [demo](https://dwqs.github.io/react-virtual-list/)

## Prop Types

|Property|Type|Default|Required?|Description|

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

|itemCount|Number||✓|需要渲染的数据个数|

|renderItem|Function||✓|渲染列表项元素的函数: `({index: number, isScrolling: boolean}): React.PropTypes.node`|

|overscanCount|Number|5||在可见区域之外的上/下方渲染的 Buffer 值，调整这个值可以避免部分设备上的滚动那个闪烁|

|estimatedItemHeight|Number|175||列表项的预估高度|

|className|String|''||设置包裹元素的 className|

|onScroll|Function|() => {}||滚动容器的 scrollTop 发生改变时触发: `({scrollTop: number}):void`|

|loadMoreItems|Function|() => {}||用于无限滚动。当需要加载更多数据时触发|

|onLoading|Function|() => null||用于无限滚动。当在加载下一页数据时显示的 Loading 组件|

|onEnded|Function|() => null||用于无限滚动。当没有更多可加载的数据时显示的组件|

|hasMore|Boolean|false||用于无限滚动。表示是否有更多数据需要加载|

|height|Number|undefined||包裹元素的高度. 如果属性 `useWindow` 是 `false` 并且未设置 `scrollableTarget`, 包裹元素会成为滚动容器|

|useWindow|Boolean|true||是否使 Window 成为滚动容器，此时会监听 `window` 上的 `scroll` 事件。在移动端建议使用|

|scrollableTarget|String|undefined||设置滚动容器元素, 其值会用于 `document.getElementById`。Window 是默认的滚动容器。如果要自定义滚动容器，需要将属性 `useWindow` 置为 `false`，并且不要设置 `height` 属性 |

|noContentRenderer|Function|() => null||当 `itemCount` 的值是 0 时，会调用这个回调|

## Development

```shell

git clone [email protected]:dwqs/react-virtual-list.git

cd react-virtual-list

npm i 

npm run dev

```

## LICENSE

This repo is released under the [MIT](http://opensource.org/licenses/MIT)