From b28d9b838803340e21c237968adb4b4624c5adce Mon Sep 17 00:00:00 2001 From: KgTong Date: Tue, 8 May 2018 17:30:06 +0800 Subject: [PATCH] demo: add use of listview component nested with tabbar, close #2455 --- .../__tests__/__snapshots__/demo.test.js.snap | 199 +++++++++++ components/tab-bar/demo/listview-tabbar.md | 320 ++++++++++++++++++ site/bisheng.common.config.js | 2 +- 3 files changed, 520 insertions(+), 1 deletion(-) create mode 100644 components/tab-bar/demo/listview-tabbar.md diff --git a/components/tab-bar/__tests__/__snapshots__/demo.test.js.snap b/components/tab-bar/__tests__/__snapshots__/demo.test.js.snap index 47b3477804..d586a8bbc7 100644 --- a/components/tab-bar/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tab-bar/__tests__/__snapshots__/demo.test.js.snap @@ -217,3 +217,202 @@ exports[`renders ./components/tab-bar/demo/basic.md correctly 1`] = ` `; + +exports[`renders ./components/tab-bar/demo/listview-tabbar.md correctly 1`] = ` +
+
+
+
+
+
+
+
+
+ + header + +
+
+
+
+ Loading... +
+
+
+
+
+
+
+
+
+
+ Clicked “Koubei” tab， show “Koubei” information +
+ + Click to show/hide tab-bar + +
+
+
+
+
+
+
+
+
+
+ + +
+ + + 1 + + +
+

+ Life +

+
+
+
+ + +
+ + + new + + +
+

+ Koubei +

+
+
+
+ +
+ + +
+

+ Friend +

+
+
+
+ My +
+

+ My +

+
+
+
+
+
+
+`; diff --git a/components/tab-bar/demo/listview-tabbar.md b/components/tab-bar/demo/listview-tabbar.md new file mode 100644 index 0000000000..10f08a9b27 --- /dev/null +++ b/components/tab-bar/demo/listview-tabbar.md @@ -0,0 +1,320 @@ +--- +order: 1 +title: + zh-CN: '与ListView结合使用' + en-US: 'use with ListView component' +--- + +````jsx +import { TabBar, ListView } from 'antd-mobile'; + +const data = [ + { + img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png', + title: 'Meet hotel', + des: '不是所有的兼职汪都需要风吹日晒', + }, + { + img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png', + title: 'McDonald\'s invites you', + des: '不是所有的兼职汪都需要风吹日晒', + }, + { + img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png', + title: 'Eat the week', + des: '不是所有的兼职汪都需要风吹日晒', + }, +]; +const NUM_SECTIONS = 5; +const NUM_ROWS_PER_SECTION = 5; +let pageIndex = 0; + +const dataBlobs = {}; +let sectionIDs = []; +let rowIDs = []; +function genData(pIndex = 0) { + for (let i = 0; i < NUM_SECTIONS; i++) { + const ii = (pIndex * NUM_SECTIONS) + i; + const sectionName = `Section ${ii}`; + sectionIDs.push(sectionName); + dataBlobs[sectionName] = sectionName; + rowIDs[ii] = []; + + for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) { + const rowName = `S${ii}, R${jj}`; + rowIDs[ii].push(rowName); + dataBlobs[rowName] = rowName; + } + } + sectionIDs = [...sectionIDs]; + rowIDs = [...rowIDs]; +} + +class ListViewExample extends React.Component { + constructor(props) { + super(props); + const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID]; + const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID]; + + const dataSource = new ListView.DataSource({ + getRowData, + getSectionHeaderData: getSectionData, + rowHasChanged: (row1, row2) => row1 !== row2, + sectionHeaderHasChanged: (s1, s2) => s1 !== s2, + }); + + this.state = { + dataSource, + isLoading: true, + height: (document.documentElement.clientHeight * 3) / 4, + }; + } + + componentDidMount() { + const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop; + setTimeout(() => { + genData(); + this.setState({ + dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs), + isLoading: false, + height: hei, + }); + }, 600); + } + + onEndReached = (event) => { + if (this.state.isLoading && !this.state.hasMore) { + return; + } + console.log('reach end', event); + this.setState({ isLoading: true }); + setTimeout(() => { + genData(++pageIndex); + this.setState({ + dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs), + isLoading: false, + }); + }, 1000); + } + + render() { + const separator = (sectionID, rowID) => ( +
+ ); + let index = data.length - 1; + const row = (rowData, sectionID, rowID) => { + if (index < 0) { + index = data.length - 1; + } + const obj = data[index--]; + return ( +
+
{obj.title}
+
+ +
+
{obj.des}
+
35¥ {rowID}
+
+
+
+ ); + }; + + return ( + this.lv = el} + dataSource={this.state.dataSource} + renderHeader={() => header} + renderFooter={() => (
+ {this.state.isLoading ? 'Loading...' : 'Loaded'} +
)} + renderSectionHeader={sectionData => ( +
{`Task ${sectionData.split(' ')[1]}`}
+ )} + renderRow={row} + renderSeparator={separator} + style={{ + height: this.state.height, + overflow: 'auto', + }} + pageSize={4} + onScroll={() => { console.log('scroll'); }} + scrollRenderAheadDistance={500} + onEndReached={this.onEndReached} + onEndReachedThreshold={10} + /> + ); + } +} + +class TabBarExample extends React.Component { + constructor(props) { + super(props); + this.state = { + selectedTab: 'blueTab', + hidden: false, + }; + } + + renderContent(pageText) { + return ( + + ); + } + + render() { + return ( +
+