{"id":17704989,"url":"https://github.com/dwqs/react-virtual-list","last_synced_at":"2025-03-31T21:30:45.860Z","repository":{"id":57110194,"uuid":"150246569","full_name":"dwqs/react-virtual-list","owner":"dwqs","description":"A tiny virtualization list component(gzipped 6KB), supports dynamic height: https://dwqs.github.io/react-virtual-list/","archived":false,"fork":false,"pushed_at":"2018-11-18T09:26:25.000Z","size":796,"stargazers_count":46,"open_issues_count":3,"forks_count":13,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2024-10-26T02:34:31.421Z","etag":null,"topics":["dynamic-height","react","react-list","react-virtualized","variable-height","virtual","virtual-list","virtualization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dwqs.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-25T10:19:25.000Z","updated_at":"2023-03-17T13:19:17.000Z","dependencies_parsed_at":"2022-08-20T20:50:43.698Z","dependency_job_id":null,"html_url":"https://github.com/dwqs/react-virtual-list","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-virtual-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-virtual-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-virtual-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-virtual-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwqs","download_url":"https://codeload.github.com/dwqs/react-virtual-list/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222495108,"owners_count":16993285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dynamic-height","react","react-list","react-virtualized","variable-height","virtual","virtual-list","virtualization"],"created_at":"2024-10-24T22:05:48.049Z","updated_at":"2024-11-02T06:03:26.739Z","avatar_url":"https://github.com/dwqs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"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)\n\n# react-virtual-list\nA tiny virtualization list component, supports dynamic height.\n\n\u003e注意: 由于在 iOS UIWebviews 中，`scroll` 事件是在滚动停止之后触发的，所以不兼容iOS UIWebviews。[了解更多](https://developer.mozilla.org/en-US/docs/Web/Events/scroll#Browser_compatibility)\n\n## 安装\n通过 npm 或者 yarn 均可:\n\n```shell\n// npm\nnpm install @dwqs/react-virtual-list --save\n\n// yarn\nyarn add @dwqs/react-virtual-list\n```\n\n## 基本使用\n```js\nimport React, { Component } from 'react'\nimport VirtualizedList from '@dwqs/react-virtual-list'\n\nexport default class Hello extends Component {\n  constructor (props) {\n    super(props)\n    this.data = [{\n      id: 1,\n      val: Math.random()\n    }, {\n      id: 2,\n      val: Math.random()\n    }, {\n      id: 3,\n      val: Math.random()\n    }, ...]\n\n    this.renderItem = this.renderItem.bind(this)\n  }\n\n  renderItem ({index, isScrolling}) {\n    const item = this.data[index]\n    return (\n      \u003cdiv\u003e#{index}, {item.val}\u003c/div\u003e\n    )\n  }\n\n  render () {\n    return (\n      \u003cVirtualizedList\n        itemCount={this.data.length}\n        estimatedItemHeight={20}\n        renderItem={this.renderItem}\n      /\u003e\n    )\n  }\n}\n```\n\n在线的 [demo](https://dwqs.github.io/react-virtual-list/)\n\n## Prop Types\n|Property|Type|Default|Required?|Description|\n|:--:|:--:|:--:|:--:|:--:|\n|itemCount|Number||✓|需要渲染的数据个数|\n|renderItem|Function||✓|渲染列表项元素的函数: `({index: number, isScrolling: boolean}): React.PropTypes.node`|\n|overscanCount|Number|5||在可见区域之外的上/下方渲染的 Buffer 值，调整这个值可以避免部分设备上的滚动那个闪烁|\n|estimatedItemHeight|Number|175||列表项的预估高度|\n|className|String|''||设置包裹元素的 className|\n|onScroll|Function|() =\u003e {}||滚动容器的 scrollTop 发生改变时触发: `({scrollTop: number}):void`|\n|loadMoreItems|Function|() =\u003e {}||用于无限滚动。当需要加载更多数据时触发|\n|onLoading|Function|() =\u003e null||用于无限滚动。当在加载下一页数据时显示的 Loading 组件|\n|onEnded|Function|() =\u003e null||用于无限滚动。当没有更多可加载的数据时显示的组件|\n|hasMore|Boolean|false||用于无限滚动。表示是否有更多数据需要加载|\n|height|Number|undefined||包裹元素的高度. 如果属性 `useWindow` 是 `false` 并且未设置 `scrollableTarget`, 包裹元素会成为滚动容器|\n|useWindow|Boolean|true||是否使 Window 成为滚动容器，此时会监听 `window` 上的 `scroll` 事件。在移动端建议使用|\n|scrollableTarget|String|undefined||设置滚动容器元素, 其值会用于 `document.getElementById`。Window 是默认的滚动容器。如果要自定义滚动容器，需要将属性 `useWindow` 置为 `false`，并且不要设置 `height` 属性 |\n|noContentRenderer|Function|() =\u003e null||当 `itemCount` 的值是 0 时，会调用这个回调|\n\n## Development\n```shell\ngit clone git@github.com:dwqs/react-virtual-list.git\n\ncd react-virtual-list\n\nnpm i \n\nnpm run dev\n```\n\n## LICENSE\nThis repo is released under the [MIT](http://opensource.org/licenses/MIT)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Freact-virtual-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwqs%2Freact-virtual-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Freact-virtual-list/lists"}