Para aplicativos móveis, puxar a página de lista para atualizar e carregar mais são funções muito comuns.
Aqui, compartilharei alguns códigos fragmentados que implementei.
Puxe para atualizar
-
Para pull refresh, use
的是ant-design-mobile中的PullToRefresh 拉动
refresh diretamente .Copie de acordo com o código do site oficial
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);
Na verdade, para realizarmos a função, podemos remover o código desnecessário do caso de uso (o método de usar o caso de uso para obter dados) e simplificá-lo para
Se um erro for relatado
说找不到ReactDOM,
Você precisa apresentar
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);
Carregue mais
Um array personalizado é usado para armazenar dados da página e mais tempo para carregar, armazenar os dados antigos e novos juntos antes da renderização.
Clique em Carregar mais para aumentar o número de páginas e determine se o número da página atual é menor que o número total de páginas para determinar se é necessário exibir Carregar mais ...
-
Liste alguns pseudocódigos: matrizes de armazenamento
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) })
-