ListView 长列表

单个连续模块垂直排列，显示多行文本内容。eg：城市选择。

规则

  • 最适用于显示同类的数据类型或者数据类型组。

  • 只支持垂直滚动。

  • 可以通过日期、字母顺序或者其它参数来过滤数据或改变每行列表的顺序。

代码演示

子容器

注意：需要设置 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. 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.   },
  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.       }} />
  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: '-webkit-box', display: 'flex' }}>
  107.             <img style={{ height: 64 * (window.viewportScale || 1), marginRight: 8 }} src={obj.img} />
  108.             <div style={{ display: 'inline-block' }}>
  109.               <p>{obj.des}</p>
  110.               <p><span style={{ fontSize: '1.6em', color: '#FF6E27' }}>35</span>元/任务</p>
  111.             </div>
  112.           </div>
  113.         </div>
  114.       );
  115.     };
  116.     return (<div style={{ margin: '0 auto', width: '96%' }}>
  117.       <ListView
  118.         dataSource={this.state.dataSource}
  119.         renderHeader={() => <span>header</span>}
  120.         renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
  121.           {this.state.isLoading ? '加载中...' : '加载完毕'}
  122.         </div>}
  123.         renderSectionHeader={(sectionData) => (
  124.           <div>{`任务 ${sectionData.split(' ')[1]}`}</div>
  125.         )}
  126.         renderRow={row}
  127.         renderSeparator={separator}
  128.         pageSize={4}
  129.         scrollRenderAheadDistance={500}
  130.         scrollEventThrottle={20}
  131.         onScroll={() => { console.log('scroll'); }}
  132.         onEndReached={this.onEndReached}
  133.         onEndReachedThreshold={10}
  134.         style={{
  135.           height: document.body.clientHeight * 3 / 4,
  136.           overflow: 'auto',
  137.           border: '1px solid #ddd',
  138.           margin: '10px 0',
  139.         }}
  140.       />
  141.     </div>);
  142.   },
  143. });
  145. 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 = {};
  41.     return {
  42.       dataSource: dataSource.cloneWithRows(this.genData()),
  43.       isLoading: false,
  44.     };
  45.   },
  47.   onEndReached(event) {
  48.     // load new data
  49.     console.log('reach end', event);
  50.     this.setState({ isLoading: true });
  51.     setTimeout(() => {
  52.       this.rData = { ...this.rData, ...this.genData(++pageIndex) };
  53.       this.setState({
  54.         dataSource: this.state.dataSource.cloneWithRows(this.rData),
  55.         isLoading: false,
  56.       });
  57.     }, 1000);
  58.   },
  60.   render() {
  61.     const separator = (sectionID, rowID) => (
  62.       <div key={`${sectionID}-${rowID}`} style={{
  63.         backgroundColor: '#F5F5F9',
  64.         height: 8,
  65.         borderTop: '1px solid #ECECED',
  66.         borderBottom: '1px solid #ECECED',
  67.       }} />
  68.     );
  69.     const row = (rowData, sectionID, rowID) => {
  70.       if (index < 0) {
  71.         index = data.length - 1;
  72.       }
  73.       const obj = data[index--];
  74.       return (
  75.         <div key={rowID}
  76.           style={{
  77.             padding: '8px 16px',
  78.             backgroundColor: 'white',
  79.           }}
  80.         >
  81.           <h3 style={{
  82.             padding: 2,
  83.             marginBottom: 8,
  84.             borderBottom: '1px solid #F6F6F6',
  85.           }}>{obj.title}</h3>
  86.           <div style={{ display: '-webkit-box', display: 'flex' }}>
  87.             <img style={{ height: 64 * (window.viewportScale || 1), marginRight: 8 }} src={obj.img} />
  88.             <div style={{ display: 'inline-block' }}>
  89.               <p>{obj.des}</p>
  90.               <p><span style={{ fontSize: '1.6em', color: '#FF6E27' }}>35</span>元/任务</p>
  91.             </div>
  92.           </div>
  93.         </div>
  94.       );
  95.     };
  96.     return (<div>
  97.       <ListView
  98.         dataSource={this.state.dataSource}
  99.         renderHeader={() => <span>header</span>}
  100.         renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
  101.           {this.state.isLoading ? '加载中...' : '加载完毕'}
  102.         </div>}
  103.         renderRow={row}
  104.         renderSeparator={separator}
  105.         pageSize={4}
  106.         scrollRenderAheadDistance={500}
  107.         scrollEventThrottle={20}
  108.         onScroll={() => { console.log('scroll'); }}
  109.         useBodyScroll
  110.         onEndReached={this.onEndReached}
  111.         onEndReachedThreshold={10}
  112.       />
  113.     </div>);
  114.   },
  115. });
  117. 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.     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: '-webkit-box', display: 'flex' }}>
  106.             <img style={{ height: 64 * (window.viewportScale || 1), marginRight: 8 }} src={obj.img} />
  107.             <div style={{ display: 'inline-block' }}>
  108.               <p>{obj.des}</p>
  109.               <p><span style={{ fontSize: '1.6em', 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 },
  135.           // topOffset: -43,
  136.           // isActive: false, // 关闭 sticky 效果
  137.         }}
  138.       />
  139.     </div>);
  140.   },
  141. });
  143. ReactDOM.render(<Demo />, mountNode);

IndexedList

用于通讯薄等场景 

  1. /* eslint no-mixed-operators: 0 */
  2. import province from 'site/data/province';
  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 (<div>
  40.       <div style={{ position: 'relative' }}>
  41.         <ListView.IndexedList
  42.           dataSource={this.state.dataSource}
  43.           renderHeader={() => <span>头部内容请自定义</span>}
  44.           renderFooter={() => <span>尾部内容请自定义</span>}
  45.           renderSectionHeader={(sectionData) => (<div>{sectionData}</div>)}
  46.           renderRow={(rowData) => (<Item>{rowData}</Item>)}
  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.       </div>
  59.     </div>);
  60.   },
  61. });
  63. ReactDOM.render(<Demo />, mountNode);

IndexedList 吸顶

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

  1. import provinceData from 'site/data/province';
  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: 44 * (window.viewportScale || 1) }}>
  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>{sectionData}</div>)}
  68.         renderRow={(rowData) => (<Item>{rowData}</Item>)}
  69.         stickyHeader
  70.         stickyProps={{
  71.           stickyStyle: { zIndex: 999 },
  72.         }}
  73.         quickSearchBarStyle={{
  74.           top: 85,
  75.         }}
  76.         delayTime={10}
  77.         delayActivityIndicator={<div style={{ padding: 25, textAlign: 'center' }}>渲染中...</div>}
  78.       />
  79.     </div>);
  80.   },
  81. });
  83. 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 (web)

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

  • stickyHeader 固定区块标题到页面顶部 (注意: 设置后，ScrollComponent 将被渲染到 body 的第一个元素里，使用 html 的 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 指示器