antd-mobile的下拉刷新上拉加载使用

Posted 2021-04-24 web交流

在使用antd-mobile有用到下拉刷新上拉加载>import { NavBar, Icon ,Tabs , ListView , PullToRefresh } from 'antd-mobile'; // 这是我这个页面要的的组件
贴出我所有的代码，可以直接复制，我的这个是自定义的下来刷新上拉加载>// 新闻列表import React, { Component } from 'react';import { NavBar, Icon ,Tabs , ListView , PullToRefresh } from 'antd-mobile';import '../../pageCss/newsList/newsList.css'import {findGardenInfoAll} from '../../api/newsList/newsListApi'class News extends Component { constructor(props){ super(props) const dataSource = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }); this.state={ tabs:[ { title: '全部', sub: '1' }, { title: '园区动态', sub: '2' }, { title: '木业资讯', sub: '3' } ], tabsIndex:0,//tab选择的 newsList:[],//数据 dataSource:dataSource, //列表的初始化 refreshing: true, //下拉刷新 isLoading: true, //文字显示 pages:{ pageNum:1,//第几页 pageSize:10,//每页多少 type:0,//列表的类型 } } } query(pages){//数据请求 let _this = this; findGardenInfoAll(pages).then(res=>{ if(res.pages>=this.state.pages.pageNum){ _this.state.pages.pageNum++; this.state.newsList = [...this.state.newsList,...res.list] this.setState({ newsList:this.state.newsList, dataSource: this.state.dataSource.cloneWithRows(this.state.newsList), isLoading: false, pages:_this.state.pages, }); }else { _this.setState({ isLoading: false }) } _this.setState({ refreshing:false }) }) } onRefresh = () => { //下拉刷新 this.state.pages.pageNum = 1; this.setState({ refreshing: true, isLoading: true ,pages:this.state.pages,newsList:[]}); setTimeout(() => { this.query(this.state.pages) }, 600); } onEndReached = (event) => {//触底加载 if (this.state.isLoading) { return; } this.setState({ isLoading: true }); setTimeout(() => { this.query(this.state.pages) }, 600); } render() {//我们列表展示的数据样式等 const row = (rowData, sectionID, rowID) => { return ( <div key={rowID} style={{ height:'1rem',marginTop:'0.1rem',background:'#ffffff'}}> <div>{rowData.messageTitle}</div> </div> ); }; return ( <div id="news-container" className='boxContent'> <div className='page'> <NavBar mode="light" icon={<Icon type="left" />} onLeftClick={() => this.props.history.go(-1)}> 新闻资讯 </NavBar> {/*---*/} <div className='newsBox'> <Tabs tabs={this.state.tabs} onTabClick={(tab, index) => { this.state.pages.type = index; this.state.pages.pageNum = 1; this.setState({ refreshing: true, isLoading: true ,pages:this.state.pages,newsList:[]}); this.query(this.state.pages); }}></Tabs> {/*----*/} <div className='newsBoxList'> <ListView ref={el => this.lv = el} dataSource={this.state.dataSource} renderFooter={() => (<div style={{ textAlign: 'center' }}> {this.state.isLoading ? '加载中...' : '已加载全部'} </div>)} renderRow={row} style={{ height: '100%', overflow: 'auto', }} pullToRefresh={<PullToRefresh refreshing={this.state.refreshing} onRefresh={this.onRefresh} />} scrollRenderAheadDistance={500} onEndReached={this.onEndReached} onEndReachedThreshold={10} /> </div> </div> </div> </div> ) } componentDidMount(){ setTimeout(() => { this.query(this.state.pages) // this.rData = genData(); // this.setState({ // dataSource: this.state.dataSource.cloneWithRows(this.rData), // isLoading: false, // }); }, 600); }}export default News;
效果如下

github上有react的demo已经搭建好环境，拦截，统一token等等
https://github.com/liqiangsheng/react-demo.git

这是我demo的，如果多个页面要我封装了方法引入用

>//下拉加载的方法/*** //* pages分页// *api请求数据// *_this= this// *dataSource下拉刷新的实例// *isLoading加载// * refreshing下拉刷新 //* dataList数据 //* ***/export function loadingMore(api,pages,_this,dataSource,isLoading,refreshing,dataList) { api(pages).then(res=>{ if(res.pages>=pages.pageNum){ pages.pageNum++; dataList = [...dataList,...res.list] _this.setState({ dataList:dataList, dataSource: dataSource.cloneWithRows(dataList), isLoading: false, pages:pages, }); }else { _this.setState({ isLoading: false }) } _this.setState({ refreshing:false }) })}