Ant Design Mobile listview長列表的坑
阿新 • • 發佈:2019-01-08
按照官網的配置,datasource一直只顯示幾個,不會把以前的datasource數組合並在一起,官網傳送門
import {PullToRefresh, ListView, Button, Toast} from 'antd-mobile'; import React from "react"; import ReactDOM from "react-dom"; import 'antd-mobile/dist/antd-mobile.css'; import {config} from 'utils/config' export default class extends React.Component { constructor(props) { super(props); const dataSource = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }); this.state = { dataSource, datas:[], pageIndex:1, refreshing: true, isLoading: true, useBodyScroll: false, dataBlobs: {}, sectionIDs:[], rowIDs:[], dataArr:[],//關鍵程式碼 }; } genData(ref=false) { //獲取資料 let that=this; let notid=''; fetch(config.gethonedata(1)+'?page='+(that.state.pageIndex),{ method:'get', dataType:'json', }).then(response=>response.json()).then(function (res){ if(parseInt(res.st)===1) { const lg = res.data.length; if(lg<=0){ Toast.info('沒有資料了~',1); return false; } let dataArr = that.state.dataArr;//關鍵程式碼 let m=that.state.datas; for (let i = 0; i < lg; i++) { //每一次讀取的資料都進行儲存一次 dataArr.push(`row - ${(that.state.pageIndex * lg) + i}`); m.push(res.data[i]) } if(ref){ //這裡表示重新整理使用 that.setState({ datas:res.data, pageIndex:that.state.pageIndex+1, dataSource: that.state.dataSource.cloneWithRows(dataArr), refreshing: false, isLoading: false, //儲存資料進state dataArr:dataArr }); }else{ //這裡表示上拉載入更多 that.rData = { ...that.rData, ...dataArr }; that.setState({ datas:m, pageIndex:that.state.pageIndex+1, dataSource: that.state.dataSource.cloneWithRows(that.rData), refreshing: false, isLoading: false, //儲存資料進state dataArr:dataArr }); } }else { Toast.info(res.msg,1); } }); } componentDidUpdate() { } componentDidMount() { this.genData(true); } onRefresh = () => { let that=this; this.setState({ refreshing: true, isLoading: true,pageIndex:1 }); setTimeout(() => { that.genData(true); }, 2000); }; onEndReached = (event) => { if (this.state.isLoading && !this.state.hasMore) { return; } this.setState({ isLoading: true,pageIndex:this.state.pageIndex+1 }); let that=this; setTimeout(() => { that.genData(false); }, 1000); }; //這下面的程式碼跟官網沒啥區別,唯一不同的是把外部定義的資料都儲存進了state render() { const separator = (sectionID, rowID) => ( <div key={`${sectionID}-${rowID}`} style={{ backgroundColor: '#F5F5F9', height: 8, borderTop: '1px solid #ECECED', borderBottom: '1px solid #ECECED', }} /> ); let index = this.state.datas.length - 1; const row = (rowData, sectionID, rowID) => { if (index < 0) { index = this.state.datas.length - 1; } const obj = this.state.datas[index--]; return ( <div key={rowID} style={{ padding: '0 15px', backgroundColor: 'white', height:'4rem' }} > <div style={{ height: '50px', lineHeight: '50px', color: '#888', fontSize: '18px', borderBottom: '1px solid #ddd' }}> {obj.title} </div> <div style={{ display: '-webkit-box', display: 'flex', padding: '15px' }}> <img style={{ height: '63px', width: '63px', marginRight: '15px' }} src={obj.img} alt="" /> <div style={{ display: 'inline-block' }}> <div style={{ fontSize: '16px' }}><span style={{ fontSize: '30px', color: '#FF6E27' }}>{rowID}</span> 元/任務</div> </div> </div> </div> ); }; return (<div> <ListView key={this.state.useBodyScroll ? '0' : '1'} ref={el => this.lv = el} dataSource={this.state.dataSource} renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}> {this.state.isLoading ? 'Loading...' : 'Loaded'} </div>)} renderRow={row} renderSeparator={separator} useBodyScroll style={this.state.useBodyScroll ? {} : { border: '1px solid #ddd', margin: '5px 0', }} pullToRefresh={<PullToRefresh refreshing={this.state.refreshing} onRefresh={this.onRefresh} />} onEndReachedThreshold={1000} onEndReached={this.onEndReached} pageSize={5} /> </div>); } }