For mobile apps, pulling the list page to refresh and load more are very common functions.
Here I will share some fragmented code that I implemented.
Pull to refresh
-
For pull refresh, use
的是ant-design-mobile中的PullToRefresh 拉动refresh directly .Copy it according to the code on the official website
import { PullToRefresh, Button } from 'antd-mobile'; function genData() { const dataArr = []; for (let i = 0; i < 20; i++) { dataArr.push(i); } return dataArr; } class Demo extends React.Component { constructor(props) { super(props); this.state = { refreshing: false, down: true, height: document.documentElement.clientHeight, data: [], }; } componentDidMount() { const hei = this.state.height - ReactDOM.findDOMNode(this.ptr).offsetTop; setTimeout(() => this.setState({ height: hei, data: genData(), }), 0); } render() { return (<div> <Button style={ { marginBottom: 15 }} onClick={ () => this.setState({ down: !this.state.down })} > direction: { this.state.down ? 'down' : 'up'} </Button> <PullToRefresh damping={ 60} ref={ el => this.ptr = el} style={ { height: this.state.height, overflow: 'auto', }} indicator={ this.state.down ? { } : { deactivate: '上拉可以刷新' }} direction={ this.state.down ? 'down' : 'up'} refreshing={ this.state.refreshing} onRefresh={ () => { this.setState({ refreshing: true }); setTimeout(() => { this.setState({ refreshing: false }); }, 1000); }} > { this.state.data.map(i => ( <div key={ i} style={ { textAlign: 'center', padding: 20 }}> { this.state.down ? 'pull down' : 'pull up'} { i} </div> ))} </PullToRefresh> </div>); } } ReactDOM.render(<Demo />, mountNode);In fact, for us to realize the function, we can remove the unnecessary code of the use case (the method of using the use case to obtain data), and simplify it to
If an error is reported
说找不到ReactDOM，You need to introduce
import ReactDOM from 'react-dom';import { PullToRefresh, Button } from 'antd-mobile'; class Demo extends React.Component { constructor(props) { super(props); this.state = { refreshing: false, down: true, height: document.documentElement.clientHeight, }; } componentDidMount() { const hei = this.state.height - ReactDOM.findDOMNode(this.ptr).offsetTop; setTimeout(() => this.setState({ height: hei, }), 0); } render() { return ( <div> <PullToRefresh damping={ 60} ref={ el => this.ptr = el} style={ { height: this.state.height, overflow: 'auto', }} indicator={ this.state.down ? { } : { deactivate: '上拉可以刷新' }} direction={ this.state.down ? 'down' : 'up'} refreshing={ this.state.refreshing} onRefresh={ () => { this.setState({ refreshing: true }); setTimeout(() => { this.setState({ refreshing: false }, () => { // ---------------------------- 写自己刷新的事件方法 }); }, 1000); }} > // -------------------放自己的页面布局代码 </div> </PullToRefresh> </div>); } } ReactDOM.render(<Demo />, mountNode);load more
A custom array is used to store page data, and more time to load, store the old and new data together before rendering.
Click Load more to increase the number of pages, and determine whether the current page number is less than the total number of pages to determine whether it is necessary to display Load more...
-
List some pseudo-codes: store arrays
this.setState({ initClassDynamicsList: [...initClassDynamicsList, ...classDynamicsList], initCommentContentList: [...commentContentList, ...initCommentContentList] }, () => { if (pageIndex > 1) { (initClassDynamicsList || []).forEach((item) => { item.commentList.forEach((item2) => { commentIdList.push(item2.commentId) }) accountIdList.push(item.teacherAccountId) })
-