1:組件地址

https://github.com/bvaughn/react-virtualized

1:添加依賴(lài)

npm install react-virtualized --save

ES6, CommonJS, and UMD builds are available with each distribution. For example:

// Most of react-virtualized's styles are functional (eg position, size).
// Functional styles are applied directly to DOM elements.
// The Table component ships with a few presentational styles as well.
// They are optional, but if you want them you will need to also import the CSS file.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css';

// You can import any component you want as a named export from 'react-virtualized', eg
import {Column, Table} from 'react-virtualized';
// But if you only use a few react-virtualized components,
// And you're concerned about increasing your application's bundle size,
// You can directly import only the components you need, like so:
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import List from 'react-virtualized/dist/commonjs/List';

首先選擇List

選擇source查看列表源碼

import {List} from 'react-virtualized';
<List
       width={window.screen.width}
       height={window.screen.height-45}
      //列表數(shù)
       rowCount={this.state.citysList.length}
      //行高,可以直接寫(xiě)高度,也可以是個(gè)函數(shù),當(dāng)行高不確定時(shí),就需要在函數(shù)里面計(jì)算返回了
       rowHeight={this.rowHeight}
       rowRenderer={this.rowRenderer}
       //滾動(dòng)觸發(fā)
       onRowsRendered={this.onRowsRendered}
      //當(dāng)前滾動(dòng)到那一列,與下面結(jié)合使用,否者可能會(huì)有bug
       scrollToIndex={this.state.activeIndex}
       scrollToAlignment="start"
  />
//** rowRenderer函數(shù)**
 function rowRenderer({
  index, // Index of row
  isScrolling, // The List is currently being scrolled
  isVisible, // This row is visible within the List (eg it is not an overscanned row)
  key, // Unique key within array of rendered rows
  parent, // Reference to the parent List (instance)
  style, // Style object to be applied to row (to position it);
  // This must be passed through to the rendered row element.
}) {
  const user = list[index];

  // If row content is complex, consider rendering a light-weight placeholder while scrolling.
  const content = isScrolling ? '...' : <User user={user} />;

  // Style is required since it specifies how the row is to be sized and positioned.
  // React Virtualized depends on this sizing/positioning for proper scrolling behavior.
  // By default, the List component provides following style properties:
  //    position
  //    left
  //    top
  //    height
  //    width
  // You can add additional class names or style properties as you would like.
  // Key is also required by React to more efficiently manage the array of rows.
  return (
    <div key={key} style={style}>
      {content}
    </div>
  );
}

選擇Docs查看List相關(guān)參數(shù)和函數(shù)

List:Prop Types1

List:Prop Types2