需求:根据后台的数据,判断是否有下一页。如果有下一页,用户上划加载更多调用接口。
结合 antd-mobile 的 ListView 组件实现。
参数解释
- dataSource:数据源(数组)
- currentPage:页数
- initialListSize:初始化展示的条数
- pageSize:每一页的条数
- onEndReachedThreshold:距离底部的距离
- nextLink:根据后台返回的数据,是否有下一页
- isLoadingMore:用户是否在上拉
- isRefreshing:用户是否在下拉
- damping:距离顶部多少进入下拉
import React from "react";
import {
immutableRenderDecorator } from "react-immutable-render-mixin";
import PropTypes from "prop-types";
import {
ListView } from "antd-mobile"
import {
PullToRefresh } from "antd-mobile"
import "./refreshList-component.less";
class RefreshList extends React.Component {
static defaultProps = {
name: "stranger"
}
constructor(props) {
super(props)
const dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
this.state = {
dataSource: dataSource.cloneWithRows(this.props.resLst),
currentPage: this.props.currentPage || 0,
initialListSize: this.props.initialListSize || 20,
pageSize: this.props.pageSize || 20,
onEndReachedThreshold: this.props.onEndReachedThreshold || 60,
nextLink: this.props.nextLink,
isLoadingMore: this.props.isLoadingMore || false,
isRefreshing: this.props.isRefreshing || false,
damping: this.props.damping || 26
};
}
componentWillReceiveProps(nextProps, nextState) {
if (nextProps.resLst) {
const dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
this.hasScroll = false
this.setState({
dataSource: dataSource.cloneWithRows(nextProps.resLst)
},