@cainiaofe/cn-ui-m
Version:
74 lines (73 loc) • 3.6 kB
JavaScript
import { __assign, __awaiter, __generator, __spreadArray } from "tslib";
import React from 'react';
import { CnListPro, CnListProItem, CnDemoBlock, CnDemoPage, CnIcon, } from "../../..";
import { request } from 'cn-request';
export var 滚动加载远程数据 = function () {
var _a = React.useState(false), loading = _a[0], setLoading = _a[1];
var _b = React.useState([]), dataSource = _b[0], setDataSource = _b[1];
var pageInfo = React.useRef({
currentPage: 1,
pageSize: 10,
totalCount: null,
});
var run = function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, fetchList()];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); };
React.useEffect(function () {
run();
}, []);
var fetchList = function () {
setLoading(true);
return new Promise(function (resolve, reject) {
request({
url: 'https://oneapi.alibaba-inc.com/mock/cn-template/table-data.json',
method: 'GET',
params: {
currentPage: pageInfo.current.currentPage,
pageSize: pageInfo.current.pageSize,
},
})
.then(function (res) {
var _a;
setLoading(false);
var _b = ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) || {}, tableData = _b.tableData, paging = _b.paging;
if (paging) {
pageInfo.current.currentPage = paging.currentPage;
pageInfo.current.pageSize = paging.pageSize;
pageInfo.current.totalCount = paging.totalCount;
}
setDataSource(__spreadArray(__spreadArray([], dataSource, true), tableData, true));
resolve(res);
})
.catch(function (err) {
reject(err);
});
});
};
return (React.createElement(CnDemoPage, { title: "\u6EDA\u52A8\u52A0\u8F7D\u8FDC\u7A0B\u6570\u636E" },
React.createElement(CnDemoBlock, { title: "\u6EDA\u52A8\u52A0\u8F7D\u8FDC\u7A0B\u6570\u636E" },
React.createElement(CnListPro, { loading: loading, dataSource: dataSource, renderItem: function (item) {
return (React.createElement(CnListProItem, { title: item.orderNo, description: item.mark, actions: React.createElement(CnIcon, { type: "arrow-right", size: "medium" }), itemKey: item.id }));
}, pagination: __assign(__assign({}, pageInfo.current), { onChange: function (currentPage) { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
pageInfo.current.currentPage = currentPage;
return [4 /*yield*/, fetchList()];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); } }) }))));
};
export default { title: 'demo/CnListPro' };
滚动加载远程数据.desc =
'通过设置pagination属性实现,注意传loading属性以确保数据正确加载';