diff --git a/components/list-view/demo/basic-row.tsx b/components/list-view/demo/basic-row.tsx
new file mode 100644
index 0000000000..b6863195cd
--- /dev/null
+++ b/components/list-view/demo/basic-row.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import { View, Text, TouchableHighlight, Image } from 'react-native';
+import { ListView } from 'antd-mobile';
+import assign from 'object-assign';
+
+const data = [
+ {
+ img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
+ title: '相约酒店',
+ des: '不是所有的兼职汪都需要风吹日晒',
+ },
+ {
+ img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
+ title: '麦当劳邀您过周末',
+ des: '不是所有的兼职汪都需要风吹日晒',
+ },
+ {
+ img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
+ title: '食惠周',
+ des: '不是所有的兼职汪都需要风吹日晒',
+ },
+];
+let index = data.length - 1;
+
+const NUM_ROWS = 20;
+let pageIndex = 0;
+
+export default React.createClass({
+ getInitialState() {
+ const dataSource = new ListView.DataSource({
+ rowHasChanged: (row1, row2) => row1 !== row2,
+ });
+
+ this.genData = (pIndex = 0) => {
+ const dataBlob = {};
+ for (let i = 0; i < NUM_ROWS; i++) {
+ const ii = (pIndex * NUM_ROWS) + i;
+ dataBlob[`${ii}`] = `row - ${ii}`;
+ }
+ return dataBlob;
+ };
+ this.rData = {};
+ return {
+ dataSource: dataSource.cloneWithRows(this.genData()),
+ isLoading: false,
+ };
+ },
+
+ onEndReached(event) {
+ // load new data
+ // console.log('reach end', event);
+ this.setState({ isLoading: true });
+ setTimeout(() => {
+ this.rData = assign({}, this.rData, this.genData(++pageIndex));
+ this.setState({
+ dataSource: this.state.dataSource.cloneWithRows(this.rData),
+ isLoading: false,
+ });
+ }, 1000);
+ },
+
+ render() {
+ const separator = (sectionID, rowID) => (
+
+ );
+ const row = (rowData, sectionID, rowID, highlightRow = (sId, rId) => {}) => {
+ if (index < 0) {
+ index = data.length - 1;
+ }
+ const obj = data[index--];
+ return (
+ {
+ highlightRow(sectionID, rowID);
+ }}
+ >
+
+
+ {obj.title}
+
+
+
+
+ {obj.des} - {rowID}
+ {this.props.highlightRow}
+ 35元/任务
+
+
+
+
+ );
+ };
+ return (
+ header}
+ renderFooter={() =>
+ {this.state.isLoading ? '加载中...' : '加载完毕'}
+ }
+ renderRow={row}
+ renderSeparator={separator}
+ pageSize={4}
+ scrollRenderAheadDistance={500}
+ scrollEventThrottle={20}
+ onEndReached={this.onEndReached}
+ onEndReachedThreshold={10}
+ onChangeVisibleRows={(visibleRows, changedRows) => {
+ /* tslint no-console: 0 */
+ // console.log(visibleRows, changedRows);
+ }}
+ />
+ );
+ },
+});
+
+export const title = 'ListView Row';
+export const description = 'ListView Row example';
diff --git a/components/list-view/demo/basic.tsx b/components/list-view/demo/basic.tsx
index faa4e7cef4..dcf91b0fea 100644
--- a/components/list-view/demo/basic.tsx
+++ b/components/list-view/demo/basic.tsx
@@ -25,7 +25,7 @@ const NUM_SECTIONS = 5;
const NUM_ROWS_PER_SECTION = 5;
let pageIndex = 0;
-export default React.createClass({
+export default React.createClass({
getInitialState() {
const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
@@ -120,7 +120,7 @@ export default React.createClass({
}]}>
- {obj.des}
+ {obj.des} - {rowID}
{this.props.highlightRow}
35元/任务
@@ -147,6 +147,9 @@ export default React.createClass({
pageSize={4}
onEndReached={this.onEndReached}
onEndReachedThreshold={10}
+ onChangeVisibleRows={(visibleRows, changedRows) => {
+ // console.log(visibleRows, changedRows);
+ }}
/>
);
},
diff --git a/rn-kitchen-sink/demoList.js b/rn-kitchen-sink/demoList.js
index e20b9a4acb..9a567cb536 100644
--- a/rn-kitchen-sink/demoList.js
+++ b/rn-kitchen-sink/demoList.js
@@ -50,6 +50,12 @@ module.exports = {
icon: 'https://zos.alipayobjects.com/rmsportal/lMztpIPTRAIWGIP.png',
module: require('../components/list-view/demo/basic'),
},
+ {
+ title: 'ListView (only row)',
+ description: '长列表',
+ icon: 'https://zos.alipayobjects.com/rmsportal/lMztpIPTRAIWGIP.png',
+ module: require('../components/list-view/demo/basic-row'),
+ },
{
title: 'Modal',
description: '对话框',