@cainiaofe/cn-ui-m
Version:
35 lines (34 loc) • 2.14 kB
JavaScript
import { __assign, __spreadArray } from "tslib";
import React from 'react';
import { CnListPro, CnListProItem, CnDemoBlock, CnDemoPage, CnImageViewer, CnIcon, } from "../../..";
function getRowData(currentPage, pageSize) {
var data = new Array(pageSize).fill(0).map(function (_, index) {
return {
title: "\u6807\u9898".concat((currentPage - 1) * pageSize + index + 1),
description: "\u63CF\u8FF0".concat((currentPage - 1) * pageSize + index + 1),
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
};
});
return data;
}
export var 滚动加载 = function () {
var _a = React.useState([]), dataSource = _a[0], setDataSource = _a[1];
var _b = React.useState({
totalCount: 100,
pageSize: 20,
currentPage: 1,
}), pagination = _b[0], setPagination = _b[1];
React.useEffect(function () {
setDataSource(__spreadArray(__spreadArray([], dataSource, true), getRowData(pagination.currentPage, pagination.pageSize), true));
}, []);
return (React.createElement(CnDemoPage, { title: "\u6EDA\u52A8\u52A0\u8F7D" },
React.createElement(CnDemoBlock, { title: "\u6EDA\u52A8\u52A0\u8F7D" },
React.createElement(CnListPro, { dataSource: dataSource, renderItem: function (item) {
return (React.createElement(CnListProItem, { title: item.title, description: item.description, avatar: React.createElement(CnImageViewer, { width: 40, height: 40, src: item.avatar }), actions: React.createElement(CnIcon, { type: "arrow-right", size: "medium" }), itemKey: item.key }));
}, pagination: __assign(__assign({}, pagination), { onChange: function (currentPage) {
setPagination(__assign(__assign({}, pagination), { currentPage: currentPage }));
setDataSource(__spreadArray(__spreadArray([], dataSource, true), getRowData(currentPage, pagination.pageSize), true));
} }) }))));
};
export default { title: 'demo/CnListPro' };
滚动加载.desc = '通过设置pagination属性实现';