@cainiaofe/cn-ui-m
Version:
25 lines (24 loc) • 1.32 kB
JavaScript
import React, { useState } from 'react';
import { CnBox, CnDemoPage, CnScrollView, CnSkeleton, } from "../../..";
export var 基本 = function () {
var _a = useState(20), total = _a[0], setTotal = _a[1];
var loadMore = function () {
setTotal(total + 10);
};
return (React.createElement(CnDemoPage, { title: "\u57FA\u672C" },
React.createElement(CnScrollView, { hasMore: total > 10, loadMore: loadMore },
React.createElement("div", null, "\u4E0B\u62C9\u6301\u7EED\u52A0\u8F7D"),
Array(total)
.fill('-')
.map(function (item, index) {
return (React.createElement(CnBox, { direction: "row", align: "center" },
React.createElement("div", { style: { padding: 20 } }, index),
React.createElement("div", { style: { flex: 1 } },
React.createElement(CnSkeleton, { key: index },
React.createElement(CnSkeleton.Title, null),
React.createElement(CnSkeleton.Paragraph, null)))));
}))));
};
基本.desc =
'基本用法，通过 hasMore 和 loadMore 控制增量数据的渲染，也可以通过 moreRender 自定义“加载更多”的样式';
export default { title: 'demo/CnScrollView' };