antd-mobile上拉加载组件分离

最新推荐文章于 2024-04-24 15:05:05 发布

weixin_44247693

最新推荐文章于 2024-04-24 15:05:05 发布

阅读量124

点赞数

文章标签： react javascript js

本文链接：https://blog.csdn.net/weixin_44247693/article/details/117701914

版权


```javascript
/**
 * @description: 上拉加载组件
 * @param {*} 传入 row(循环的每一行数据) getData() 请求数据   dataList 数据源
 * @return {*}
 */
 import React from 'react'

 import { ListView } from 'antd-mobile';
 
 class ListContainer extends React.Component {
   constructor(props) {
     super(props);
     const dataSource = new ListView.DataSource({  //这个dataSource有cloneWithRows方法
       rowHasChanged: (row1, row2) => row1 !== row2,
     });   
     
     this.state = {
       dataSource,
       isLoading: true,
       hasMore: true
     };
   }
   
   componentWillReceiveProps(nextProps) {
     this.setState({
       dataSource: this.state.dataSource.cloneWithRows(nextProps.dataList),
       refreshing: false,
       isLoading: false,
     });
    }
 
 
   onEndReached =  () => {
     if(this.props.dataList.length < 9) {
       this.setState({
         hasMore: false
       })
     }else {
       this.props.getData()
     }
   };
 
   render() {
     return (
       <div>
         <ListView
           ref={el => this.lv = el}
           dataSource={this.state.dataSource}
           renderFooter={    //renderFooter就是下拉时候的loading效果，这里的内容可以自己随需求更改
             () => (
                   <div style={{  textAlign: 'center' }}>
                     {this.state.isLoading ? '加载中...' : '暂无数据'}
                   </div>
                 )
           }
           renderRow={this.props.row}   //渲染你上边写好的那个row
           style={{
             minHeight: 'calc(100vh - 100px)',
             border: '1px solid #ddd',
             margin: '5px 0',
           }}
           onEndReached={this.onEndReached}
           pageSize={10}    //每次下拉之后显示的数据条数
         />
       </div>
     );
   }
 }
 
 export default ListContainer




## 用法

```javascript
 import ListContainer from '../../components/ListView'
// 应用
	<List>
		{this.state.data  && <ListContainer dataList={this.state.data} row={row} getData={this.getData} /> } 
 	</List>