ListView 长列表

最适用于显示同类的长列表数据类型，对渲染性能有一定的优化效果

代码演示

自定义容器

注意：需要设置 ListView 的 style 的 height/overflow，以此作为滚动容器。

同时建议设置body的overflow: hidden

  1. /* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
  2. import { ListView } from 'antd-mobile';
  4. const data = [
  5.   {
  6.     img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
  7.     title: '相约酒店',
  8.     des: '不是所有的兼职汪都需要风吹日晒',
  9.   },
  10.   {
  11.     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
  12.     title: '麦当劳邀您过周末',
  13.     des: '不是所有的兼职汪都需要风吹日晒',
  14.   },
  15.   {
  16.     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
  17.     title: '食惠周',
  18.     des: '不是所有的兼职汪都需要风吹日晒',
  19.   },
  20. ];
  21. let index = data.length - 1;
  23. const NUM_SECTIONS = 5;
  24. const NUM_ROWS_PER_SECTION = 5;
  25. let pageIndex = 0;
  27. function MyBody(props) {
  28.   return (
  29.     <div className="am-list-body my-body">
  30.       <span style={{ display: 'none' }}>you can custom body wrap element</span>
  31.       {props.children}
  32.     </div>
  33.   );
  34. }
  36. const Demo = React.createClass({
  37.   getInitialState() {
  38.     const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
  39.     const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
  41.     const dataSource = new ListView.DataSource({
  42.       getRowData,
  43.       getSectionHeaderData: getSectionData,
  44.       rowHasChanged: (row1, row2) => row1 !== row2,
  45.       sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
  46.     });
  48.     this.dataBlob = {};
  49.     this.sectionIDs = [];
  50.     this.rowIDs = [];
  51.     this.genData = (pIndex = 0) => {
  52.       for (let i = 0; i < NUM_SECTIONS; i++) {
  53.         const ii = (pIndex * NUM_SECTIONS) + i;
  54.         const sectionName = `Section ${ii}`;
  55.         this.sectionIDs.push(sectionName);
  56.         this.dataBlob[sectionName] = sectionName;
  57.         this.rowIDs[ii] = [];
  59.         for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
  60.           const rowName = `S${ii}, R${jj}`;
  61.           this.rowIDs[ii].push(rowName);
  62.           this.dataBlob[rowName] = rowName;
  63.         }
  64.       }
  65.       // new object ref
  66.       this.sectionIDs = [].concat(this.sectionIDs);
  67.       this.rowIDs = [].concat(this.rowIDs);
  68.     };
  69.     this.genData();
  70.     return {
  71.       dataSource: dataSource.cloneWithRowsAndSections(this.dataBlob, this.sectionIDs, this.rowIDs),
  72.       isLoading: false,
  73.     };
  74.   },
  76.   componentDidMount() {
  77.     // you can scroll to the specified position
  78.     // this.refs.lv.refs.listview.scrollTo(0, 200);
  79.   },
  81.   onEndReached(event) {
  82.     // load new data
  83.     console.log('reach end', event);
  84.     this.setState({ isLoading: true });
  85.     setTimeout(() => {
  86.       this.genData(++pageIndex);
  87.       this.setState({
  88.         dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlob, this.sectionIDs, this.rowIDs),
  89.         isLoading: false,
  90.       });
  91.     }, 1000);
  92.   },
  94.   render() {
  95.     const separator = (sectionID, rowID) => (
  96.       <div key={`${sectionID}-${rowID}`} style={{
  97.         backgroundColor: '#F5F5F9',
  98.         height: 8,
  99.         borderTop: '1px solid #ECECED',
  100.         borderBottom: '1px solid #ECECED',
  101.       }}
  102.       />
  103.     );
  104.     const row = (rowData, sectionID, rowID) => {
  105.       if (index < 0) {
  106.         index = data.length - 1;
  107.       }
  108.       const obj = data[index--];
  109.       return (
  110.         <div key={rowID}
  111.           style={{
  112.             padding: '0.08rem 0.16rem',
  113.             backgroundColor: 'white',
  114.           }}
  115.         >
  116.           <h3 style={{ padding: 2, marginBottom: '0.08rem', borderBottom: '1px solid #F6F6F6' }}>
  117.             {obj.title}
  118.           </h3>
  119.           <div style={{ display: '-webkit-box', display: 'flex' }}>
  120.             <img style={{ height: '1.28rem', marginRight: '0.08rem' }} src={obj.img} />
  121.             <div style={{ display: 'inline-block' }}>
  122.               <p>{obj.des}</p>
  123.               <p><span style={{ fontSize: '1.6em', color: '#FF6E27' }}>35</span>元/任务</p>
  124.             </div>
  125.           </div>
  126.         </div>
  127.       );
  128.     };
  129.     return (<div style={{ margin: '0 auto', width: '96%' }}>
  130.       <ListView ref="lv"
  131.         dataSource={this.state.dataSource}
  132.         renderHeader={() => <span>header</span>}
  133.         renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
  134.           {this.state.isLoading ? '加载中...' : '加载完毕'}
  135.         </div>}
  136.         renderSectionHeader={(sectionData) => (
  137.           <div>{`任务 ${sectionData.split(' ')[1]}`}</div>
  138.         )}
  139.         renderBodyComponent={() => <MyBody />}
  140.         renderRow={row}
  141.         renderSeparator={separator}
  142.         className="fortest"
  143.         style={{
  144.           height: document.body.clientHeight * 3 / 4,
  145.           overflow: 'auto',
  146.           border: '1px solid #ddd',
  147.           margin: '0.1rem 0',
  148.         }}
  149.         pageSize={4}
  150.         scrollRenderAheadDistance={500}
  151.         scrollEventThrottle={20}
  152.         onScroll={() => { console.log('scroll'); }}
  153.         onEndReached={this.onEndReached}
  154.         onEndReachedThreshold={10}
  155.       />
  156.     </div>);
  157.   },
  158. });
  160. ReactDOM.render(<Demo />, mountNode);

body 容器

使用 html 的 body 作为滚动容器 

  1. /* eslint no-dupe-keys: 0 */
  2. import { ListView } from 'antd-mobile';
  4. const data = [
  5.   {
  6.     img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
  7.     title: '相约酒店',
  8.     des: '不是所有的兼职汪都需要风吹日晒',
  9.   },
  10.   {
  11.     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
  12.     title: '麦当劳邀您过周末',
  13.     des: '不是所有的兼职汪都需要风吹日晒',
  14.   },
  15.   {
  16.     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
  17.     title: '食惠周',
  18.     des: '不是所有的兼职汪都需要风吹日晒',
  19.   },
  20. ];
  21. let index = data.length - 1;
  23. const NUM_ROWS = 20;
  24. let pageIndex = 0;
  26. const Demo = React.createClass({
  27.   getInitialState() {
  28.     const dataSource = new ListView.DataSource({
  29.       rowHasChanged: (row1, row2) => row1 !== row2,
  30.     });
  32.     this.genData = (pIndex = 0) => {
  33.       const dataBlob = {};
  34.       for (let i = 0; i < NUM_ROWS; i++) {
  35.         const ii = (pIndex * NUM_ROWS) + i;
  36.         dataBlob[`${ii}`] = `row - ${ii}`;
  37.       }
  38.       return dataBlob;
  39.     };
  40.     this.rData = this.genData();
  41.     return {
  42.       dataSource: dataSource.cloneWithRows(this.rData),
  43.       isLoading: false,
  44.     };
  45.   },
  47.   componentDidMount() {
  48.     // you can scroll to the specified position
  49.     // this.refs.lv.refs.listview.scrollTo(0, 200);
  50.   },
  52.   onEndReached(event) {
  53.     // load new data
  54.     console.log('reach end', event);
  55.     this.setState({ isLoading: true });
  56.     setTimeout(() => {
  57.       this.rData = { ...this.rData, ...this.genData(++pageIndex) };
  58.       this.setState({
  59.         dataSource: this.state.dataSource.cloneWithRows(this.rData),
  60.         isLoading: false,
  61.       });
  62.     }, 1000);
  63.   },
  65.   render() {
  66.     const separator = (sectionID, rowID) => (
  67.       <div key={`${sectionID}-${rowID}`} style={{
  68.         backgroundColor: '#F5F5F9',
  69.         height: 8,
  70.         borderTop: '1px solid #ECECED',
  71.         borderBottom: '1px solid #ECECED',
  72.       }}
  73.       />
  74.     );
  75.     const row = (rowData, sectionID, rowID) => {
  76.       if (index < 0) {
  77.         index = data.length - 1;
  78.       }
  79.       const obj = data[index--];
  80.       return (
  81.         <div key={rowID}
  82.           style={{
  83.             padding: '0.08rem 0.16rem',
  84.             backgroundColor: 'white',
  85.           }}
  86.         >
  87.           <h3 style={{ padding: 2, marginBottom: '0.08rem', borderBottom: '1px solid #F6F6F6' }}>
  88.             {obj.title}
  89.           </h3>
  90.           <div style={{ display: '-webkit-box', display: 'flex' }}>
  91.             <img style={{ height: '1.28rem', marginRight: '0.08rem' }} src={obj.img} />
  92.             <div style={{ display: 'inline-block' }}>
  93.               <p>{obj.des}</p>
  94.               <p><span style={{ fontSize: '1.6em', color: '#FF6E27' }}>{rowID}</span>元/任务</p>
  95.             </div>
  96.           </div>
  97.         </div>
  98.       );
  99.     };
  100.     return (
  101.       <ListView ref="lv"
  102.         dataSource={this.state.dataSource}
  103.         renderHeader={() => <span>header</span>}
  104.         renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
  105.           {this.state.isLoading ? '加载中...' : '加载完毕'}
  106.         </div>}
  107.         renderRow={row}
  108.         renderSeparator={separator}
  109.         className="am-list"
  110.         pageSize={4}
  111.         scrollRenderAheadDistance={500}
  112.         scrollEventThrottle={20}
  113.         onScroll={() => { console.log('scroll'); }}
  114.         useBodyScroll
  115.         onEndReached={this.onEndReached}
  116.         onEndReachedThreshold={10}
  117.       />
  118.     );
  119.   },
  120. });
  122. ReactDOM.render(<Demo />, mountNode);

标题吸顶（body 容器）

区块标题 “吸顶”(sticky) 功能示例 

  1. /* eslint no-dupe-keys: 0 */
  2. import { ListView } from 'antd-mobile';
  4. const data = [
  5.   {
  6.     img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
  7.     title: '相约酒店',
  8.     des: '不是所有的兼职汪都需要风吹日晒',
  9.   },
  10.   {
  11.     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
  12.     title: '麦当劳邀您过周末',
  13.     des: '不是所有的兼职汪都需要风吹日晒',
  14.   },
  15.   {
  16.     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
  17.     title: '食惠周',
  18.     des: '不是所有的兼职汪都需要风吹日晒',
  19.   },
  20. ];
  21. let index = data.length - 1;
  23. const NUM_SECTIONS = 5;
  24. const NUM_ROWS_PER_SECTION = 5;
  25. let pageIndex = 0;
  27. const Demo = React.createClass({
  28.   getInitialState() {
  29.     const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
  30.     const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
  32.     const dataSource = new ListView.DataSource({
  33.       getRowData,
  34.       getSectionHeaderData: getSectionData,
  35.       rowHasChanged: (row1, row2) => row1 !== row2,
  36.       sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
  37.     });
  39.     this.dataBlob = {};
  40.     this.sectionIDs = [];
  41.     this.rowIDs = [];
  42.     this.genData = (pIndex = 0) => {
  43.       for (let i = 0; i < NUM_SECTIONS; i++) {
  44.         const ii = (pIndex * NUM_SECTIONS) + i;
  45.         const sectionName = `Section ${ii}`;
  46.         this.sectionIDs.push(sectionName);
  47.         this.dataBlob[sectionName] = sectionName;
  48.         this.rowIDs[ii] = [];
  50.         for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
  51.           const rowName = `S${ii}, R${jj}`;
  52.           this.rowIDs[ii].push(rowName);
  53.           this.dataBlob[rowName] = rowName;
  54.         }
  55.       }
  56.       // new object ref
  57.       this.sectionIDs = [].concat(this.sectionIDs);
  58.       this.rowIDs = [].concat(this.rowIDs);
  59.     };
  60.     this.genData();
  61.     return {
  62.       dataSource: dataSource.cloneWithRowsAndSections(this.dataBlob, this.sectionIDs, this.rowIDs),
  63.       isLoading: false,
  64.     };
  65.   },
  67.   onEndReached(event) {
  68.     // load new data
  69.     console.log('reach end', event);
  70.     this.setState({ isLoading: true });
  71.     setTimeout(() => {
  72.       this.genData(++pageIndex);
  73.       this.setState({
  74.         dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlob, this.sectionIDs, this.rowIDs),
  75.         isLoading: false,
  76.       });
  77.     }, 1000);
  78.   },
  79.   render() {
  80.     const separator = (sectionID, rowID) => (
  81.       <div key={`${sectionID}-${rowID}`} style={{
  82.         backgroundColor: '#F5F5F9',
  83.         height: 8,
  84.         borderTop: '1px solid #ECECED',
  85.         borderBottom: '1px solid #ECECED',
  86.       }}
  87.       />
  88.     );
  89.     const row = (rowData, sectionID, rowID) => {
  90.       if (index < 0) {
  91.         index = data.length - 1;
  92.       }
  93.       const obj = data[index--];
  94.       return (
  95.         <div key={rowID}
  96.           style={{
  97.             padding: '0.08rem 0.16rem',
  98.             backgroundColor: 'white',
  99.           }}
  100.         >
  101.           <h3 style={{ padding: 2, marginBottom: '0.08rem', borderBottom: '1px solid #F6F6F6' }}>
  102.             {obj.title}
  103.           </h3>
  104.           <div style={{ display: '-webkit-box', display: 'flex' }}>
  105.             <img style={{ height: '1.28rem', marginRight: '0.08rem' }} src={obj.img} />
  106.             <div style={{ display: 'inline-block' }}>
  107.               <p>{obj.des}</p>
  108.               <p><span style={{ fontSize: '1.6em', color: '#FF6E27' }}>35</span>元/任务</p>
  109.             </div>
  110.           </div>
  111.         </div>
  112.       );
  113.     };
  114.     return (
  115.       <ListView
  116.         dataSource={this.state.dataSource}
  117.         renderHeader={() => <span>header</span>}
  118.         renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
  119.           {this.state.isLoading ? '加载中...' : '加载完毕'}
  120.         </div>}
  121.         renderSectionHeader={(sectionData) => (
  122.           <div>{`任务 ${sectionData.split(' ')[1]}`}</div>
  123.         )}
  124.         renderRow={row}
  125.         renderSeparator={separator}
  126.         className="am-list"
  127.         pageSize={4}
  128.         scrollEventThrottle={20}
  129.         onScroll={() => { console.log('scroll'); }}
  130.         onEndReached={this.onEndReached}
  131.         onEndReachedThreshold={10}
  132.         stickyHeader
  133.         stickyProps={{
  134.           stickyStyle: { zIndex: 999, WebkitTransform: 'none', transform: 'none' },
  135.           // topOffset: -43,
  136.           // isActive: false, // 关闭 sticky 效果
  137.         }}
  138.         stickyContainerProps={{
  139.           className: 'for-stickyContainer-demo',
  140.         }}
  141.       />
  142.     );
  143.   },
  144. });
  146. ReactDOM.render(<Demo />, mountNode);

索引列表

用于通讯薄等场景 

  1. /* eslint no-mixed-operators: 0 */
  2. import { province } from 'antd-mobile-demo-data';
  3. import { ListView, List } from 'antd-mobile';
  5. const { Item } = List;
  7. const Demo = React.createClass({
  8.   getInitialState() {
  9.     const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
  10.     const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
  12.     const dataSource = new ListView.DataSource({
  13.       getRowData,
  14.       getSectionHeaderData: getSectionData,
  15.       rowHasChanged: (row1, row2) => row1 !== row2,
  16.       sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
  17.     });
  19.     const dataBlob = {};
  20.     const sectionIDs = [];
  21.     const rowIDs = [];
  22.     Object.keys(province).forEach((item, index) => {
  23.       sectionIDs.push(item);
  24.       dataBlob[item] = item;
  25.       rowIDs[index] = [];
  27.       province[item].forEach(jj => {
  28.         rowIDs[index].push(jj.value);
  29.         dataBlob[jj.value] = jj.label;
  30.       });
  31.     });
  32.     return {
  33.       dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
  34.       headerPressCount: 0,
  35.     };
  36.   },
  38.   render() {
  39.     return (
  40.       <ListView.IndexedList
  41.         dataSource={this.state.dataSource}
  42.         renderHeader={() => <span>头部内容请自定义</span>}
  43.         renderFooter={() => <span>尾部内容请自定义</span>}
  44.         renderSectionHeader={(sectionData) => (<div className="ih">{sectionData}</div>)}
  45.         renderRow={(rowData) => (<Item>{rowData}</Item>)}
  46.         className="fortest"
  47.         style={{
  48.           height: document.body.clientHeight * 3 / 4,
  49.           overflow: 'auto',
  50.         }}
  51.         quickSearchBarStyle={{
  52.           position: 'absolute',
  53.           top: 20,
  54.         }}
  55.         delayTime={10}
  56.         delayActivityIndicator={<div style={{ padding: 25, textAlign: 'center' }}>渲染中...</div>}
  57.       />
  58.     );
  59.   },
  60. });
  62. ReactDOM.render(<Demo />, mountNode);

索引列表（标题吸顶）

用于通讯薄等场景 “吸顶”(sticky) 

  1. import { province as provinceData } from 'antd-mobile-demo-data';
  2. import { ListView, List, SearchBar } from 'antd-mobile';
  4. const { Item } = List;
  6. const Demo = React.createClass({
  7.   getInitialState() {
  8.     const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
  9.     const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
  11.     const dataSource = new ListView.DataSource({
  12.       getRowData,
  13.       getSectionHeaderData: getSectionData,
  14.       rowHasChanged: (row1, row2) => row1 !== row2,
  15.       sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
  16.     });
  18.     this.createDs = (ds, province) => {
  19.       const dataBlob = {};
  20.       const sectionIDs = [];
  21.       const rowIDs = [];
  22.       Object.keys(province).forEach((item, index) => {
  23.         sectionIDs.push(item);
  24.         dataBlob[item] = item;
  25.         rowIDs[index] = [];
  27.         province[item].forEach(jj => {
  28.           rowIDs[index].push(jj.value);
  29.           dataBlob[jj.value] = jj.label;
  30.         });
  31.       });
  32.       return ds.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs);
  33.     };
  34.     return {
  35.       inputValue: '',
  36.       dataSource: this.createDs(dataSource, provinceData),
  37.       headerPressCount: 0,
  38.     };
  39.   },
  41.   onSearch(val) {
  42.     const pd = { ...provinceData };
  43.     Object.keys(pd).forEach((item) => {
  44.       pd[item] = pd[item].filter(jj => jj.spell.toLocaleLowerCase().indexOf(val) > -1);
  45.     });
  46.     this.setState({
  47.       inputValue: val,
  48.       dataSource: this.createDs(this.state.dataSource, pd),
  49.     });
  50.   },
  52.   render() {
  53.     return (<div style={{ paddingTop: '0.88rem', position: 'relative' }}>
  54.       <div style={{ position: 'absolute', top: 0, left: 0, right: 0 }}>
  55.         <SearchBar
  56.           value={this.state.inputValue}
  57.           placeholder="搜索"
  58.           onChange={this.onSearch}
  59.           onClear={() => { console.log('onClear'); }}
  60.           onCancel={() => { console.log('onCancel'); }}
  61.         />
  62.       </div>
  63.       <ListView.IndexedList
  64.         dataSource={this.state.dataSource}
  65.         renderHeader={() => <span>头部内容请自定义</span>}
  66.         renderFooter={() => <span>尾部内容请自定义</span>}
  67.         renderSectionHeader={(sectionData) => (<div className="ih">{sectionData}</div>)}
  68.         renderRow={(rowData) => (<Item>{rowData}</Item>)}
  69.         className="am-list"
  70.         stickyHeader
  71.         stickyProps={{
  72.           stickyStyle: { zIndex: 999 },
  73.         }}
  74.         quickSearchBarStyle={{
  75.           top: 85,
  76.         }}
  77.         delayTime={10}
  78.         delayActivityIndicator={<div style={{ padding: 25, textAlign: 'center' }}>渲染中...</div>}
  79.       />
  80.     </div>);
  81.   },
  82. });
  84. ReactDOM.render(<Demo />, mountNode);

ListView长列表 - 图1

API ( 适用平台：WEB、React-Native )

React Native ListView 在 WEB 平台上不被支持的 API 列表：

一般情况下，不支持“平台特有”的API，例如androidendFillColor、iOSalwaysBounceHorizontal。另外，使用 css 代替 react-native 的 style 设置方式。

  • onChangeVisibleRows

  • stickyHeaderIndices

  • ScrollView 组件中不被支持的 API:

    • keyboardDismissMode

    • keyboardShouldPersistTaps

    • onContentSizeChange (可使用onLayout替代)

    • removeClippedSubviews

    • scrollEnabled

    • showsHorizontalScrollIndicator (可使用 css style 替代)

    • showsVerticalScrollIndicator (可使用 css style 替代)

  • View 组件 API: 只支持onLayout

WEB 平台新增API

  • useBodyScroll (boolean, false) - 使用 html 的 body 作为滚动容器

  • stickyHeader (boolean, false) - 固定区块标题到页面顶部 (注意: 设置后会自动使用 html 的 body 作为滚动容器)

    • 开启 sticky 后还可以设置 stickyProps / stickyContainerProps (详见 react-sticky)

  • renderBodyComponent (function, () => React.Element) - 自定义 body 的包裹组件

  • renderSectionBodyWrapper (function, (sectionID: any) => React.Element) - 渲染自定义的区块包裹组件

  • useZscroller (boolean, false) - 使用 zscroller 来模拟实现滚动容器 (可用于一些低端 Android 机上)

    • 注意：开启后useBodyScroll和stickyHeader设置会自动被忽略

  • scrollerOptions - 详见 zscroller options

WEB 平台新增 ListView.IndexedList 组件

此组件常用于 “通讯录”/“城市列表” 等场景中，支持索引导航功能。

注意：由于索引列表可以点击任一项索引来定位其内容、即内容需要直接滚动到任意位置，这样就难以做到像 ListView 一样能在滚动时自动懒渲染。目前实现上只支持分两步渲染，能借此达到首屏优先显示目的，但如果列表数据量过大时、整体性能仍会有影响。

  • quickSearchBarTop (object{value:string, label:string}, value/label 默认为'#') - 快捷导航栏最顶部按钮、常用于回到顶部

  • quickSearchBarStyle (object) - quickSearchBar 的 style

  • onQuickSearch (function, (sectionID: any, topId?:any) => void) 快捷导航切换时调用

  • delayTime (number) - 默认 100ms, 延迟渲染时间设置（用于首屏优化，一开始渲染initialListSize数量的数据，在此时间后、延迟渲染剩余的数据项、即totalRowCount - initialListSize）

  • delayActivityIndicator (react node) - 延迟渲染的 loading 指示器

常见问题与实现原理

ListView 有三种类型的滚动容器：

  • html 的 body 容器

  • 局部 div 容器 (通过 ref 获取到)

  • 使用 zscroller 的模拟滚动容器

前两种获取到相应元素后，调用 scrollTo 方法、滚动到指定位置；第三种通过 ref 获取到组件对象、再获取到 domScroller 、调用 scrollTo 方法。但滚动到具体什么位置，业务上其实也比较难确定。 另一问题：对 dataSource 对象变化时的处理方式是什么？何时调用 onEndReached 方法？ ListView 在 componentWillReceiveProps 里会监听 dataSource 对象的变化，并做一次this._renderMoreRowsIfNeeded() ，由于此时this.state.curRenderedRowsCount === this.props.dataSource.getRowCount()即已经渲染的数据与 dataSource 里已有的数据项个数相同，所以 ListView 认为应该再调用 onEndReached 方法。