ListView 长列表

定义／Definition

react-native 核心组件。 高性能列表：节点分步渲染；无尽列表。

规则 / Rule

常用在渲染长列表中

代码演示

基本

无尽列表 

  1. import { ListView, Toast, Button } from 'antd-mobile';
  3. const data = [
  4.   {
  5.     img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
  6.     title: '相约酒店',
  7.     des: '不是所有的兼职汪都需要风吹日晒',
  8.   },
  9.   {
  10.     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
  11.     title: '麦当劳邀您过周末',
  12.     des: '不是所有的兼职汪都需要风吹日晒',
  13.   },
  14.   {
  15.     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
  16.     title: '食惠周',
  17.     des: '不是所有的兼职汪都需要风吹日晒',
  18.   },
  19. ];
  20. let index = data.length - 1;
  22. const NUM_SECTIONS = 5;
  23. const NUM_ROWS_PER_SECTION = 5;
  24. let pageIndex = 0;
  26. const Demo = React.createClass({
  27.   getInitialState() {
  28.     const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
  29.     const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
  31.     const dataSource = new ListView.DataSource({
  32.       getRowData,
  33.       getSectionHeaderData: getSectionData,
  34.       rowHasChanged: (row1, row2) => row1 !== row2,
  35.       sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
  36.     });
  38.     this.dataBlob = {};
  39.     this.sectionIDs = [];
  40.     this.rowIDs = [];
  41.     this.genData = (pIndex = 0) => {
  42.       for (let i = 0; i < NUM_SECTIONS; i++) {
  43.         const ii = pIndex * NUM_SECTIONS + i;
  44.         const sectionName = `Section ${ii}`;
  45.         this.sectionIDs.push(sectionName);
  46.         this.dataBlob[sectionName] = sectionName;
  47.         this.rowIDs[ii] = [];
  49.         for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
  50.           const rowName = `S${ii}, R${jj}`;
  51.           this.rowIDs[ii].push(rowName);
  52.           this.dataBlob[rowName] = rowName;
  53.         }
  54.       }
  55.       // new object ref
  56.       this.sectionIDs = [].concat(this.sectionIDs);
  57.       this.rowIDs = [].concat(this.rowIDs);
  58.     };
  59.     this.genData();
  60.     return {
  61.       dataSource: dataSource.cloneWithRowsAndSections(this.dataBlob, this.sectionIDs, this.rowIDs),
  62.       isLoading: false,
  63.     };
  64.   },
  66.   onEndReached(event) {
  67.     // load new data
  68.     console.log('reach end', event);
  69.     Toast.info('加载新数据');
  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.   },
  80.   render() {
  81.     const separator = (sectionID, rowID) => (
  82.       <div key={`${sectionID}-${rowID}`} style={{
  83.         backgroundColor: '#F5F5F9',
  84.         height: 8,
  85.         borderTop: '1px solid #ECECED',
  86.         borderBottom: '1px solid #ECECED',
  87.       }}></div>
  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: '8px 16px',
  98.             backgroundColor: 'white',
  99.           }}
  100.         >
  101.           <h3 style={{
  102.             padding: 2,
  103.             marginBottom: 8,
  104.             borderBottom: '1px solid #F6F6F6',
  105.           }}>{obj.title}</h3>
  106.           <div style={{ display: 'flex' }}>
  107.             <img style={{ height: 64, marginRight: 8 }} src={obj.img} />
  108.             <div>
  109.               <p>{obj.des}</p>
  110.               <p><span style={{ fontSize: 24, color: '#FF6E27' }}>35</span>元/任务</p>
  111.             </div>
  112.           </div>
  113.         </div>
  114.       );
  115.     };
  116.     this.ctrlBodyScroll(false, true);
  117.     return (<div style={{ margin: '0 auto', width: '96%' }}>
  118.       <ListView
  119.         dataSource={this.state.dataSource}
  120.         renderHeader={() => <span>header</span>}
  121.         renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
  122.           {this.state.isLoading ? '加载中...' : '加载完毕'}
  123.         </div>}
  124.         renderSectionHeader={(sectionData) => (
  125.           <div>{`任务 ${sectionData.split(' ')[1]}`}</div>
  126.         )}
  127.         renderRow={row}
  128.         renderSeparator={separator}
  129.         pageSize={4}
  130.         scrollRenderAheadDistance={500}
  131.         scrollEventThrottle={20}
  132.         onScroll={() => { console.log('scroll'); }}
  133.         onEndReached={this.onEndReached}
  134.         onEndReachedThreshold={10}
  135.         style={{ height: 300, overflow: 'auto', border: '1px solid #ddd', margin: '10px 0' }}
  136.       />
  137.       <div>
  138.         <p>切换`body`的`overflow`样式：</p>
  139.         <Button inline size="small" onClick={() => { this.ctrlBodyScroll(true); }}>auto</Button>&nbsp;
  140.         <Button inline size="small" onClick={() => { this.ctrlBodyScroll(false); }}>hidden</Button>
  141.       </div>
  142.     </div>);
  143.   },
  144.   ctrlBodyScroll(flag, init) {
  145.     document.body.style.overflowY = flag ? 'auto' : 'hidden';
  146.     if (parent && parent !== self && !init) {
  147.       parent.document.body.style.overflowY = flag ? 'auto' : 'hidden';
  148.     }
  149.   },
  150. });
  152. ReactDOM.render(<Demo />, mountNode);

sticky

无尽列表 sticky 

  1. import { ListView, Toast } from 'antd-mobile';
  3. const data = [
  4.   {
  5.     img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
  6.     title: '相约酒店',
  7.     des: '不是所有的兼职汪都需要风吹日晒',
  8.   },
  9.   {
  10.     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
  11.     title: '麦当劳邀您过周末',
  12.     des: '不是所有的兼职汪都需要风吹日晒',
  13.   },
  14.   {
  15.     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
  16.     title: '食惠周',
  17.     des: '不是所有的兼职汪都需要风吹日晒',
  18.   },
  19. ];
  20. let index = data.length - 1;
  22. const NUM_SECTIONS = 5;
  23. const NUM_ROWS_PER_SECTION = 5;
  24. let pageIndex = 0;
  26. const Demo = React.createClass({
  27.   getInitialState() {
  28.     const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
  29.     const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
  31.     const dataSource = new ListView.DataSource({
  32.       getRowData,
  33.       getSectionHeaderData: getSectionData,
  34.       rowHasChanged: (row1, row2) => row1 !== row2,
  35.       sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
  36.     });
  38.     this.dataBlob = {};
  39.     this.sectionIDs = [];
  40.     this.rowIDs = [];
  41.     this.genData = (pIndex = 0) => {
  42.       for (let i = 0; i < NUM_SECTIONS; i++) {
  43.         const ii = pIndex * NUM_SECTIONS + i;
  44.         const sectionName = `Section ${ii}`;
  45.         this.sectionIDs.push(sectionName);
  46.         this.dataBlob[sectionName] = sectionName;
  47.         this.rowIDs[ii] = [];
  49.         for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
  50.           const rowName = `S${ii}, R${jj}`;
  51.           this.rowIDs[ii].push(rowName);
  52.           this.dataBlob[rowName] = rowName;
  53.         }
  54.       }
  55.       // new object ref
  56.       this.sectionIDs = [].concat(this.sectionIDs);
  57.       this.rowIDs = [].concat(this.rowIDs);
  58.     };
  59.     this.genData();
  60.     return {
  61.       dataSource: dataSource.cloneWithRowsAndSections(this.dataBlob, this.sectionIDs, this.rowIDs),
  62.       isLoading: false,
  63.     };
  64.   },
  66.   onEndReached(event) {
  67.     // load new data
  68.     console.log('reach end', event);
  69.     Toast.info('加载新数据');
  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.       }}></div>
  87.     );
  88.     const row = (rowData, sectionID, rowID) => {
  89.       if (index < 0) {
  90.         index = data.length - 1;
  91.       }
  92.       const obj = data[index--];
  93.       return (
  94.         <div key={rowID}
  95.           style={{
  96.             padding: '8px 16px',
  97.             backgroundColor: 'white',
  98.           }}
  99.         >
  100.           <h3 style={{
  101.             padding: 2,
  102.             marginBottom: 8,
  103.             borderBottom: '1px solid #F6F6F6',
  104.           }}>{obj.title}</h3>
  105.           <div style={{ display: 'flex' }}>
  106.             <img style={{ height: 64, marginRight: 8 }} src={obj.img} />
  107.             <div>
  108.               <p>{obj.des}</p>
  109.               <p><span style={{ fontSize: 24, color: '#FF6E27' }}>35</span>元/任务</p>
  110.             </div>
  111.           </div>
  112.         </div>
  113.       );
  114.     };
  115.     return (<div>
  116.       <ListView
  117.         dataSource={this.state.dataSource}
  118.         renderHeader={() => <span>header</span>}
  119.         renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
  120.           {this.state.isLoading ? '加载中...' : '加载完毕'}
  121.         </div>}
  122.         renderSectionHeader={(sectionData) => (
  123.           <div>{`任务 ${sectionData.split(' ')[1]}`}</div>
  124.         )}
  125.         renderRow={row}
  126.         renderSeparator={separator}
  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, top: 43 },
  135.           topOffset: -43,
  136.           // isActive: false, // 关闭 sticky 效果
  137.         }}
  138.       />
  139.     </div>);
  140.   },
  141. });
  143. ReactDOM.render(<Demo />, mountNode);

IndexedList

用于通讯薄等场景 

  1. import province from 'site/data/province';
  2. import { ListView, List, SearchBar } from 'antd-mobile';
  3. const { Item } = List;
  5. const Demo = React.createClass({
  6.   getInitialState() {
  7.     const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
  8.     const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
  10.     const dataSource = new ListView.DataSource({
  11.       getRowData,
  12.       getSectionHeaderData: getSectionData,
  13.       rowHasChanged: (row1, row2) => row1 !== row2,
  14.       sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
  15.     });
  17.     const dataBlob = {};
  18.     const sectionIDs = [];
  19.     const rowIDs = [];
  20.     Object.keys(province).forEach((item, index) => {
  21.       sectionIDs.push(item);
  22.       dataBlob[item] = item;
  23.       rowIDs[index] = [];
  25.       province[item].forEach(jj => {
  26.         rowIDs[index].push(jj.value);
  27.         dataBlob[jj.value] = jj.label;
  28.       });
  29.     });
  30.     return {
  31.       dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
  32.       headerPressCount: 0,
  33.     };
  34.   },
  36.   render() {
  37.     return (<div style={{ paddingTop: 40 }}>
  38.       <div style={{ position: 'fixed', zIndex: 999, top: 43, left: 0, right: 0 }}>
  39.         <SearchBar
  40.           value=""
  41.           placeholder="搜索"
  42.           onSubmit={(value) => { console.log(`onSubmit${value}`); }}
  43.           onChange={(value) => { console.log(value); }}
  44.           onClear={() => { console.log('onClear'); }}
  45.           onCancel={() => { console.log('onCancel'); }}
  46.           onFocus={() => { console.log('onFocus'); }}
  47.           onBlur={() => { console.log('onBlur'); }}
  48.         />
  49.       </div>
  50.       <div style={{ position: 'relative' }}>
  51.         <ListView.IndexedList
  52.           dataSource={this.state.dataSource}
  53.           renderHeader={() => <span>头部内容请自定义</span>}
  54.           renderFooter={() => <span>尾部内容请自定义</span>}
  55.           renderSectionHeader={(sectionData) => (<div>{sectionData}</div>)}
  56.           renderRow={(rowData) => (<Item>{rowData}</Item>)}
  57.           style={{ height: 400, overflow: 'auto' }}
  58.           quickSearchBarStyle={{
  59.             position: 'absolute',
  60.             top: 20, right: 10,
  61.           }}
  62.           delayTime={10}
  63.           delayActivityIndicator={<div style={{ padding: 25, textAlign: 'center' }}>渲染中...</div>}
  64.         />
  65.       </div>
  66.     </div>);
  67.   },
  68. });
  70. ReactDOM.render(<Demo />, mountNode);

IndexedList sticky

用于通讯薄等场景 sticky 

  1. import province from 'site/data/province';
  2. import { ListView, List, SearchBar } from 'antd-mobile';
  3. const { Item } = List;
  5. const Demo = React.createClass({
  6.   getInitialState() {
  7.     const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
  8.     const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
  10.     const dataSource = new ListView.DataSource({
  11.       getRowData,
  12.       getSectionHeaderData: getSectionData,
  13.       rowHasChanged: (row1, row2) => row1 !== row2,
  14.       sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
  15.     });
  17.     const dataBlob = {};
  18.     const sectionIDs = [];
  19.     const rowIDs = [];
  20.     Object.keys(province).forEach((item, index) => {
  21.       sectionIDs.push(item);
  22.       dataBlob[item] = item;
  23.       rowIDs[index] = [];
  25.       province[item].forEach(jj => {
  26.         rowIDs[index].push(jj.value);
  27.         dataBlob[jj.value] = jj.label;
  28.       });
  29.     });
  30.     return {
  31.       dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
  32.       headerPressCount: 0,
  33.     };
  34.   },
  36.   render() {
  37.     return (<div style={{ paddingTop: 40 }}>
  38.       <div style={{ position: 'fixed', zIndex: 999, top: 43, left: 0, right: 0 }}>
  39.         <SearchBar
  40.           value=""
  41.           placeholder="搜索"
  42.           onSubmit={(value) => { console.log(`onSubmit${value}`); }}
  43.           onChange={(value) => { console.log(value); }}
  44.           onClear={() => { console.log('onClear'); }}
  45.           onCancel={() => { console.log('onCancel'); }}
  46.           onFocus={() => { console.log('onFocus'); }}
  47.           onBlur={() => { console.log('onBlur'); }}
  48.         />
  49.       </div>
  50.       <ListView.IndexedList
  51.         dataSource={this.state.dataSource}
  52.         renderHeader={() => <span>头部内容请自定义</span>}
  53.         renderFooter={() => <span>尾部内容请自定义</span>}
  54.         renderSectionHeader={(sectionData) => (<div>{sectionData}</div>)}
  55.         renderRow={(rowData) => (<Item>{rowData}</Item>)}
  56.         stickyHeader
  57.         stickyProps={{
  58.           stickyStyle: { zIndex: 999, top: 83 },
  59.           topOffset: -83,
  60.         }}
  61.         quickSearchBarStyle={{
  62.           top: 85,
  63.         }}
  64.         delayTime={10}
  65.         delayActivityIndicator={<div style={{ padding: 25, textAlign: 'center' }}>渲染中...</div>}
  66.       />
  67.     </div>);
  68.   },
  69. });
  71. ReactDOM.render(<Demo />, mountNode);

ListView长列表 - 图1

API

same as React Native ListView(v0.26).

不支持的特性

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

  • onChangeVisibleRows

  • stickyHeaderIndices

  • ScrollView props:

  • keyboardDismissMode (not support control keyboard)

  • keyboardShouldPersistTaps (not support control keyboard)

  • onContentSizeChange (use onLayout instead)

  • removeClippedSubviews

  • showsHorizontalScrollIndicator (use css style instead)

  • showsVerticalScrollIndicator (use css style instead)

  • View props: 注意：只支持onLayout prop

新增API

  • stickyHeader 固定区块标题到页面顶部 (注意: 设置后，ScrollComponent 将被渲染到 body 的第一个元素里)

  • renderBodyComponent 渲染自定义的 body 组件

ListView.IndexedList (beta)

注意：由于需要直接scroll到任意位置、只支持分两步渲染，所以列表数据量过大时、性能会有影响

支持右侧导航功能

  • quickSearchBarTop (object{value:string, label:string}, 默认为'#') - 快捷导航栏置顶按钮

  • quickSearchBarStyle (object) - quickSearchBar 的 style

  • onQuickSearch (function()) 快捷导航切换时触发

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

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