Web Demo Mobile Demo Angular Demo Vue Demo React Demo

虚拟滚动条 VirtualScroll

源代码
import React from 'react';
import { Panel, VirtualScroll } from 'rc-easyui';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 10000,
      pageNumber: 1,
      pageSize: 50,
      rowHeight: 60,
      data: [],
      lazy: true
    }
  }
  componentDidMount() {
    this.getData(this.state.pageNumber).then(data => {
      this.setState({data:data})
    })
  }
  getData(pageNumber) {
    const pageSize = this.state.pageSize;
    return new Promise(resolve => {
      setTimeout(() => {
        let data = [];
        let start = (pageNumber - 1) * pageSize;
        for (let i = start; i < start + pageSize; i++) {
          data.push({
            id: i,
            name: "name" + i,
            addr: "address" + i,
            desp: "description" + i
          });
        }
        resolve(data);
      }, 0);
    });
  }
  handlePageChange(event){
    this.getData(event.pageNumber).then(data => {
      this.setState({
        pageNumber: event.pageNumber,
        data: data
      })
    })
  }
  renderItem(item) {
    const itemStyle = {
      borderBottom: '1px solid #ddd',
      padding: '10px 0'
    }
    const numStyle = {
      width: 40,
      height: 40,
      background: '#b8eecf',
      borderRadius: 20,
      textAlign: 'center',
      lineHeight: '40px',
      margin: '0 10px'
    }
    const nameStyle = {
      fontSize: 16,
      fontWeight: 'bold',
      lineHeight: '22px'
    }
    const despStyle = {
      color: '#666',
      lineHeight: '18px'
    }
    return (
      <div key={item.id} style={itemStyle} className="f-row">
        <div style={numStyle}>{item.id}</div>
        <div>
          <div style={nameStyle}>{item.name}</div>
          <div style={despStyle}>{item.desp}</div>
        </div>
      </div>
    )
  }
  render() {
    return (
      <div>
        <h2>Virtual Scroll - Lazy Load</h2>
        <Panel>
          <VirtualScroll {...this.state} 
              renderItem={this.renderItem} 
              style={{ height: 250 }}
              onPageChange={this.handlePageChange.bind(this)}>
          </VirtualScroll>
        </Panel>
      </div>
    );
  }
}

export default App;