React使用PullToRefresh完成数据加载
React使用PullToRefresh完成数据加载
一、先将从接口获取的数据渲染出来
{
_self.state.caritemlist.map((item, index) => {
return (
<li key={
item.carId}>
<p className="carNo">{
item.carCode}</p>
<div className="man">
<img src={
maindriverImg} alt="" /><span>{
item.mastDriver}</span><img src={
subdriverImg} alt="" /><span>{
item.slaveDriver}</span>
</div>
<div className="rightCoin"><img src={
rightCoin} alt="" /></div>
</li>
)
})}
二、加入PullToRefresh方法
<PullToRefresh
damping={
60} //拉动距离配置
indicator={
{
activate:'加载更多...',finish: '加载完成'}} //提示配置
direction='up' //拉动方向
refreshing={
_self.state.refreshing} //是否显示刷新状态
onRefresh={
() => {
//必选, 刷新回调函数
page_number++ //页码数+1
_self.setState({
refreshing: true
},_self.getCarList()); //setState成功后请求getCarList(获取列表数据)方法
setTimeout(() => {
_self.setState({
refreshing: false });
}, 1000);
}}
>
{
_self.state.caritemlist.map((item, index) => {
return (
<li key={
item.carId}>
<p className="carNo">{
item.carCode}</p>
<div className="man">
<img src={
maindriverImg} alt="" /><span>{
item.mastDriver}</span><img src={
subdriverImg} alt="" /><span>{
item.slaveDriver}</span>
</div>
<div className="rightCoin"><img src={
rightCoin} alt="" /></div>
</li>
)
})}
</PullToRefresh>
注：加完PullToRefresh方法后，加载后页面数据渲染没变化，这是因为要拼接一下数组数据，将之前的数据和新刷新的数据拼接在一起，再渲染，数据增加：
getCarList = () => {
var _self = this; //更改this指向
var params = {
token: token,
page_number: page_number,
page_size:page_size
}
ajax.postJson(config.carlistUrl, params, function (res) {
if (res.resultCode == 200) {
caritemlist = res.data.list;
var list = _self.state.caritemlist.concat(caritemlist);// 数据拼接
_self.setState({
caritemlist: list
}, Toast.hide())
} else {
Toast.fail(res.message, 3);
}
}, function () {
}, function (err) {
Toast.fail('网络连接失败,请检查网络设置', 3);
})
}
三、完整代码
import React from 'react';
import '../css/carList.scss'
import {
Toast, Icon ,PullToRefresh} from 'antd-mobile';
import _util_ from '../../../common/businessUtils/util';
const locationUrl = _util_.getLocation_util() + '#';
const maindriverImg = require("../images/main-driver.png");
const subdriverImg = require("../images/sub-driver.png");
const rightCoin = require("../images/next.png");
var config = require("../config/config");
var ajax = require("../../../common/businessUtils/ajaxUtils").default;
var caritemlist,page_number=1,page_size="2"
var token = "5YNls6foU6G4jlJ9++PC2wVWab8=";
class CarList extends React.Component {
constructor(props) {
super(props);
this.state = {
caritemlist: [],
refreshing:true,
}
}
componentDidMount() {
this.getCarList();
}
getCarList = () => {
var _self = this; //更改this指向
var params = {
token: token,
page_number: page_number,
page_size:page_size
}
ajax.postJson(config.carlistUrl, params, function (res) {
if (res.resultCode == 200) {
caritemlist = res.data.list;
var list = _self.state.caritemlist.concat(caritemlist);
_self.setState({
caritemlist: list
}, Toast.hide())
} else {
Toast.fail(res.message, 3);
}
}, function () {
}, function (err) {
Toast.fail('网络连接失败,请检查网络设置', 3);
})
}
render() {
var _self = this; //更改this指向
return (
<div className="carList">
<div className="list">
<ul>
<PullToRefresh
damping={
60} //拉动距离配置
indicator={
{
activate:'加载更多...',finish: '加载完成'}} //提示配置
direction='up' //拉动方向
refreshing={
_self.state.refreshing} //是否显示刷新状态
onRefresh={
() => {
//必选, 刷新回调函数
page_number++
_self.setState({
refreshing: true
},_self.getCarList());
setTimeout(() => {
_self.setState({
refreshing: false });
}, 1000);
}}
>
{
_self.state.caritemlist.map((item, index) => {
return (
<li key={
item.carId}>
<p className="carNo">{
item.carCode}</p>
<div className="man">
<img src={
maindriverImg} alt="" /><span>{
item.mastDriver}</span><img src={
subdriverImg} alt="" /><span>{
item.slaveDriver}</span>
</div>
<div className="rightCoin"><img src={
rightCoin} alt="" /></div>
</li>
)
})}
</PullToRefresh>
</ul>
</div>
</div>
)
}
}
export default CarList;
若有小伙伴们有其他方法，欢迎指教，不胜感激~
(✿◕‿◕✿)