關於antd-mobile中列表下拉重新整理PullToRefresh的使用
阿新 • • 發佈:2018-11-24
相信有很多小夥伴發現antd-mobile中的下拉重新整理元件,也發現例子挺難的,其實這個元件並沒有那麼複雜,只是demo例子不好理解,給大家提供一個簡單的demo,或許可以幫到你
上拉重新整理下拉載入
- 因為它用react-dom做操作了,所以把react-dom也導進來 - rowID是每次的ID,rowData是每次的資料 - renderSseprator就是個分隔符 - this.state.dataSource就是資料來源 - 外圍的那個const的dataSource是一種資料結構,它有一個方法叫cloneWithRows - Button沒用,刪就完了 - renderFooter是為了做上拉重新整理時的Loading效果 - 第一步是通過dataSource去拿資料,第二步是通過render(row)去渲染那個模板 - rowData是每一頁的資料,就是每次裝載進來的資料,rowID是它幫你封裝好的,直接在key={rowID}用就行, 在DidMount整完資料以後在這邊的rouData就是你的state.dataSource裡面的資料(第一頁) - renderSeparator 就是剛開始他們行和行之間的分隔符 - pageSize是重新整理的時候一次顯示幾條資料
附上程式碼,可直接複製過去,根據你的需求更改
import React,{ Component } from 'react' import ReactDOM from 'react-dom' //下拉重新整理元件依賴react-dom,所以需要將其引進來 import { PullToRefresh, ListView } from 'antd-mobile'; class ListContainer extends Component { constructor(props) { super(props); const dataSource = new ListView.DataSource({ //這個dataSource有cloneWithRows方法 rowHasChanged: (row1, row2) => row1 !== row2, }); this.pageNo = 0 //定義分頁資訊 this.state = { dataSource, refreshing: true, isLoading: true, height: document.documentElement.clientHeight, useBodyScroll: false, hasMore: true }; } componentDidUpdate() { if (this.state.useBodyScroll) { document.body.style.overflow = 'auto'; } else { document.body.style.overflow = 'hidden'; } } async componentDidMount() { const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop; this.rData = (await this.genData()).sceneryinfo; console.log(this.rData) this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.rData), height: hei, refreshing: false, isLoading: false, }); } genData(){ //請求資料的方法 this.pageNo++ //每次下拉的時候pageNo++ return fetch('/scenery/json/scenerynearycitylist.html?CountryId=0&ProvinceId=3&CityId=53&LbTypes=&sorttype=0&page='+this.pageNo+'&gradeid=0&themeid=0&pricerange=0&issearchbytimenow=0&paytype=0&range=0&keyword=0&IsGlobal=0&IsYiYuan=0&cityArea=0&lat=0&lon=0', { method: 'GET', headers: { 'content-type': 'application/json' }, }) .then(response => response.json()) .then(function(result) { if(result){ return result }else{ this.setState({ hasMore: false }) } }) } onRefresh = () => { // this.setState({ refreshing: true, isLoading: true }); // // simulate initial Ajax // setTimeout(() => { // this.rData = genData(); // this.setState({ // dataSource: this.state.dataSource.cloneWithRows(this.rData), // refreshing: false, // isLoading: false, // }); // }, 600); }; onEndReached = async (event) => { // load new data // hasMore: from backend data, indicates whether it is the last page, here is false if (this.state.isLoading && !this.state.hasMore) { return; } //如果this.state.hasMore為false,說明沒資料了,直接返回 console.log('reach end', event); this.setState({ isLoading: true }); this.rData = [...this.rData, ...((await this.genData()).sceneryinfo)]; //每次下拉之後將新資料裝填過來 this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.rData), isLoading: false, }); }; render() { //這裡就是個渲染資料,rowData就是每次過來的那一批資料,已經自動給你遍歷好了,rouID可以作為key值使用,直接渲染資料即可 const row = (rowData, sectionID, rowID) => { return ( <div key={rowID} style={{"height":"100px"}}>{rowData.name}</div> ); }; return ( <div> <ListView key={this.state.useBodyScroll ? '0' : '1'} ref={el => this.lv = el} dataSource={this.state.dataSource} renderFooter={ //renderFooter就是下拉時候的loading效果,這裡的內容可以自己隨需求更改 () => ( <div style={{ padding: 30, textAlign: 'center' }}> {this.state.isLoading ? 'Loading...' : 'Loaded'} </div> ) } renderRow={row} //渲染你上邊寫好的那個row useBodyScroll={this.state.useBodyScroll} style={this.state.useBodyScroll ? {} : { height: this.state.height, border: '1px solid #ddd', margin: '5px 0', }} pullToRefresh={<PullToRefresh refreshing={this.state.refreshing} onRefresh={this.onRefresh} />} onEndReached={this.onEndReached} pageSize={8} //每次下拉之後顯示的資料條數 /> </div> ); } } export default ListContainer
如果說你看到了這裡,是不是覺得還是有點東西的,如果你覺得幫到你了,給個評論鼓勵鼓勵孩子吧,發了這麼多到現在就一條評論,挺可憐的。後續給大家發一個在下拉重新整理元件中如何使用redux,感謝查閱~.~