//获取元素高度 const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).offsetTop; //元素 <div ref={el => this.lv = el}></div> //优化方式 2种都有一个BUG 初始化数据只能加载10条 并且全局下拉刷新 无效果 import { connect } from 'react-redux'; import {hideLoading, showLoading, showMessage, WARNING} from "../../../../store/actions"; import {Toast,PullToRefresh, ListView} from 'antd-mobile'; import styles from '../../newPages/css/home.less' /* 拉动刷新 */ class cs3 extends PageComponent { constructor(props, context) { super(props, context); const dataSource = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }); this.state = { couponList:[], //数据 pageNo: 0, //页码 pageSize: 10, // 分页size totalPage: 0, // 总页数初始化 refreshing: false, // 是否显示刷新状态 dataSource, //ListView 类 isLoading: true, // 是否显示加载状态 height: document.documentElement.clientHeight, //获取屏幕高度 局部请自己定义 useBodyScroll:false,//false局部翻页 true全页面 }; } componentDidMount() { this.getItem(); //获取数据 } //配合拉动是全局还是局部 componentDidUpdate() { if (this.state.useBodyScroll) { document.body.style.overflow = 'auto'; } else { document.body.style.overflow = 'hidden'; } } getItem=()=>{ this.request("GET", '/api/college?page='+(this.state.pageNo)+'&size='+this.state.pageSize, null, { Authorization: systemApi.getValue("token") }, null) .done((data) => { alert("1") let couponList=[...this.state.couponList, ...data.result] this.setState({ pageNo: this.state.pageNo + 1,//每次加载数据+1 couponList: couponList, dataSource: this.state.dataSource.cloneWithRows(couponList), // 数据源dataSource totalPage: Math.ceil(500 / this.state.pageSize),//总页数 refreshing: false, isLoading: false, }) }).fail((data) => { }); } // 下拉刷新 onRefresh = () => { Toast.loading(); this.setState({ pageNo: 0, totalPage: 0, couponList: [], },()=>{ this.getItem()//清空 并获取数据 }) }; // 加载更多 onEndReached = () => { if (this.state.isLoading || (this.state.totalPage < this.state.pageNo +1)) { console.log("最大页面") Toast.success("已经最后一页",2) return; } this.setState({ isLoading: true, //显示加载... },()=>{ setTimeout(() => { this.setState({ isLoading: false, }); this.getItem(); }, 1000); }); }; render() { //数据模板 const row = (rowData, sectionID, rowID) => { return ( <div key={rowID}> <div style={{"height":"2rem"}}>{rowData.id}{rowData.name}</div> </div> ); } ; return ( <Container className={styles.container} > <div className={styles.d}> <ListView key={this.state.useBodyScroll ? '0' : '1'} ref={el => this.lv = el} dataSource={this.state.dataSource} renderHeader={() => <div style={{"height":"10px"}}></div>} //数据头部 没有太紧凑 renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}> {this.state.isLoading ? 'Loading...' : '最后一页'} </div>)} //每次数据底部内容) renderRow={row} useBodyScroll={this.state.useBodyScroll} pullToRefresh={<PullToRefresh refreshing={this.state.refreshing} onRefresh={this.onRefresh} />} onEndReached={this.onEndReached} pageSize={this.state.pageSize} //direction={'up'} style={this.state.useBodyScroll ? {} : {height:this.state.height,border: '1px solid #ff0',margin: '5px 0',}} //整体边框 /> </div> </Container> ) } } function injectAction() { return { hideLoading, showLoading, showMessage, WARNING }; } module.exports = connect(null, injectAction())(cs3); //官方方式 import { connect } from 'react-redux'; import {hideLoading, showLoading, showMessage, WARNING} from "../../../../store/actions"; import {Toast,PullToRefresh, Button,ListView } from 'antd-mobile'; import styles from '../../newPages/css/home.less' /* 学校组件 */ class cs4 extends PageComponent { constructor(props, context) { super(props, context); const dataSource = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }); this.state = { pageNo: 0, //页码 pageSize: 10, // 分页size totalPage: 0, // 总页数初始化 item:[], dataSource, refreshing: true, isLoading: true, useBodyScroll:false,//false局部翻页 true全页面 }; } componentDidMount() { this.getItem(); } //获取数据 getItem=()=>{ var i=10; this.request("GET", '/api/college?page='+(this.state.pageNo)+'&size='+this.state.pageSize, null, { Authorization: systemApi.getValue("token") }, null) .done((data) => { //数据组合 let item=[...this.state.item,...data.result] this.setState({ pageNo: this.state.pageNo + 1, item: item, dataSource: this.state.dataSource.cloneWithRows(item), // 数据源dataSource totalPage: Math.ceil(500 / this.state.pageSize), refreshing: false, isLoading: false, }) }).fail((data) => { }); } //配合拉动是全局还是局部 componentDidUpdate() { if (this.state.useBodyScroll) { document.body.style.overflow = 'auto'; } else { document.body.style.overflow = 'hidden'; } } onRefresh = () => { this.setState({ refreshing: true, isLoading: true }); // 延迟刷新 setTimeout(() => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.state.item), refreshing: false, isLoading: false, pageNo:this.state.pageNo - 1, totalPage: 0, }); this.getItem() }, 600); }; //翻页 onEndReached = (event) => { console.log("翻页:"+this.state.pageNo) if(this.state.totalPage < this.state.pageNo +1){ this.setState({ isLoading: false, }); Toast.success("最大页面了",2) return; } this.setState({ isLoading: true }); setTimeout(() => { this.setState({ isLoading: false, }); this.getItem(); }, 1000); }; render() { const separator = (sectionID, rowID) => ( //每个内容内间 间隔 <div key={`${sectionID}-${rowID}`} style={{height:"10px",backgroundColor:"#f1f1f1"}}></div> ); //数据遍历 let index = this.state.item.length - 1; const row = (rowData, sectionID, rowID) => { if (index < 0) { index = this.state.item.length - 1; } const obj = this.state.item[index--]; return ( <div key={rowID} style={{padding: '0 15px',backgroundColor: 'white',}}> <div style={{"height":"1rem","line-height":"1rem"}}>{obj.id}{obj.name}{rowID}</div> </div> ); }; return ( <Container className={styles.container} > <div className={styles.d}> <div style={{"height":"1rem"}}> <ListView key={this.state.useBodyScroll ? '0' : '1'} ref={el => this.lv = el} dataSource={this.state.dataSource} renderHeader={() => <div style={{"height":"10px"}}></div>} //数据头部 没有太紧凑 renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}> {this.state.isLoading ? 'Loading...' : '最后一页'} </div>)} renderRow={row} renderSeparator={separator} //间隔 useBodyScroll={this.state.useBodyScroll} style={this.state.useBodyScroll ? {height:document.documentElement.clientHeight,border: '1px solid #ff0',margin: '5px 0',} : {height:"5rem",border: '1px solid #ff0',margin: '5px 0',}} //整体边框 pullToRefresh={<PullToRefresh refreshing={this.state.refreshing} onRefresh={this.onRefresh} />} onEndReached={this.onEndReached} pageSize={this.state.pageSize} //翻页显示多少个 /> </div> </div> </Container> ) } } function injectAction() { return { hideLoading, showLoading, showMessage, WARNING }; } module.exports = connect(null, injectAction())(cs4);
关注"都市百货" 了解南陵
微信咨询wanglf2r(不拉群 发广告者勿加)
热门评论