搜公众号
推荐 原创 视频 Java开发 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库
Lambda在线 > web交流 > antd-mobile的下拉刷新上拉加载使用

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

web交流 2019-08-10
举报
在使用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 }) })}




版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《antd-mobile的下拉刷新上拉加载使用》的版权归原作者「web交流」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

举报