Para las aplicaciones móviles, tirar de la página de la lista para actualizar y cargar más son funciones muy comunes.
Aquí compartiré un código fragmentado que implementé.
Tire para actualizar
-
Para la actualización de extracción, utilice la
的是ant-design-mobile中的PullToRefresh 拉动actualización directamente .Cópialo de acuerdo con el código en el sitio web 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);De hecho, para que nos demos cuenta de la función, podemos eliminar el código innecesario del caso de uso (el método de usar el caso de uso para obtener datos) y simplificarlo a
Si se informa un error
说找不到ReactDOM，Necesitas presentar
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);carga más
Se utiliza una matriz personalizada para almacenar datos de la página, y más tiempo para cargar, almacenar los datos antiguos y nuevos juntos antes de renderizar.
Haga clic en Cargar más para aumentar el número de páginas y determinar si el número de página actual es menor que el número total de páginas para determinar si es necesario mostrar Cargar más ...
-
Enumere algunos pseudocódigos: arreglos de tiendas
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) })
-