组件演示
[{"title":"基本","id":"components-load-more-demo-basic","tags":[],"filepath":"site/components/load-more/demo/basic.md","directory":"components/load-more/demo","filename":"basic","meta":{"title":"基本","description":"\n","order":"0","filepath":"site/components/load-more/demo/basic.md","filename":"basic","directory":"components/load-more/demo","id":"components-load-more-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar loadTimes = 0;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n loadState: 'loaded', // loading noMore\n lines: []\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onLoadMore',\n value: function onLoadMore() {\n var me = this;\n\n me.setState({\n loadState: 'loading'\n });\n\n setTimeout(function () {\n var lines = me.state.lines;\n\n if (++loadTimes < 5) {\n for (var i = 0; i < 50; i++) {\n lines.push(React.createElement(\n 'p',\n { key: loadTimes + '-' + i },\n '\\u7B2C',\n loadTimes,\n '\\u6B21\\u52A0\\u8F7D\\uFF0C\\u5F53\\u524D\\u662F\\u7B2C',\n i + 1,\n '\\u6761\\u6570\\u636E'\n ));\n }\n\n me.setState({\n lines: lines,\n loadState: 'loaded'\n });\n } else {\n me.setState({\n loadState: 'noMore'\n });\n }\n }, 1000);\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n\n var props = {\n status: me.state.loadState,\n className: 'demo-class-name',\n trigger: ['view', 'click'],\n onLoadMore: me.onLoadMore.bind(me),\n locale: 'zh-cn',\n viewLoadDelay: 150,\n\n loadText: '查看更多',\n loadingText: '加载中',\n noMoreText: '没有更多'\n };\n\n return React.createElement(\n 'div',\n { className: 'demo-content' },\n me.state.lines,\n React.createElement(_uxcore.LoadMore, props)\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-load-more-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n\n<span class=\"hljs-keyword\">import</span> { LoadMore } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">let</span> loadTimes = <span class=\"hljs-number\">0</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n loadState: <span class=\"hljs-string\">'loaded'</span>, <span class=\"hljs-comment\">// loading noMore</span>\n lines: [],\n };\n }\n\n onLoadMore() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n\n me.setState({\n loadState: <span class=\"hljs-string\">'loading'</span>,\n });\n\n setTimeout(() => {\n <span class=\"hljs-keyword\">const</span> lines = me.state.lines;\n\n <span class=\"hljs-keyword\">if</span> (++loadTimes < <span class=\"hljs-number\">5</span>) {\n <span class=\"hljs-keyword\">for</span> (<span class=\"hljs-keyword\">let</span> i = <span class=\"hljs-number\">0</span>; i < <span class=\"hljs-number\">50</span>; i++) {\n lines.push(<span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">p</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{`${loadTimes}-${i}`}</span>></span>第{loadTimes}次加载,当前是第{i + 1}条数据<span class=\"hljs-tag\"></<span class=\"hljs-title\">p</span>></span>)</span>;\n }\n\n me.setState({\n lines,\n loadState: <span class=\"hljs-string\">'loaded'</span>,\n });\n } <span class=\"hljs-keyword\">else</span> {\n me.setState({\n loadState: <span class=\"hljs-string\">'noMore'</span>,\n });\n }\n }, <span class=\"hljs-number\">1000</span>);\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n\n <span class=\"hljs-keyword\">const</span> props = {\n status: me.state.loadState,\n className: <span class=\"hljs-string\">'demo-class-name'</span>,\n trigger: [<span class=\"hljs-string\">'view'</span>, <span class=\"hljs-string\">'click'</span>],\n onLoadMore: me.onLoadMore.bind(me),\n locale: <span class=\"hljs-string\">'zh-cn'</span>,\n viewLoadDelay: <span class=\"hljs-number\">150</span>,\n\n loadText: <span class=\"hljs-string\">'查看更多'</span>,\n loadingText: <span class=\"hljs-string\">'加载中'</span>,\n noMoreText: <span class=\"hljs-string\">'没有更多'</span>,\n };\n\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo-content\"</span>></span>\n {me.state.lines}\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">LoadMore</span> {<span class=\"hljs-attribute\">...props</span>} /></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></span>\n )</span>;\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">Demo</span> /></span>, document.getElementById('components-load-more-demo-basic'));</span></code></pre></div><style type=\"text/css\">.demo-content {\n margin: 10px auto;\n max-height: 300px;\n overflow: auto;\n}\n\n.demo-content p {\n text-align: center;\n font-size: 14px;\n background: #fafafa;\n height: 30px;\n line-height: 30px;\n}</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.demo-content</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">10px</span> auto</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">max-height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">300px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">overflow</span>:<span class=\"hljs-value\"> auto</span></span>;\n}</span>\n\n<span class=\"hljs-class\">.demo-content</span> <span class=\"hljs-tag\">p</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">text-align</span>:<span class=\"hljs-value\"> center</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">14px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">background</span>:<span class=\"hljs-value\"> <span class=\"hljs-hexcolor\">#fafafa</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">30px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">line-height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">30px</span></span></span>;\n}</span></code></pre></div>"},"status":"public","toc":""}]
import classnames from 'classnames';;
import { LoadMore } from 'uxcore';
let loadTimes = 0;
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
loadState: 'loaded', // loading noMore
lines: [],
};
}
onLoadMore() {
const me = this;
me.setState({
loadState: 'loading',
});
setTimeout(() => {
const lines = me.state.lines;
if (++loadTimes < 5) {
for (let i = 0; i < 50; i++) {
lines.push(<p key={`${loadTimes}-${i}`}>第{loadTimes}次加载,当前是第{i + 1}条数据</p>);
}
me.setState({
lines,
loadState: 'loaded',
});
} else {
me.setState({
loadState: 'noMore',
});
}
}, 1000);
}
render() {
const me = this;
const props = {
status: me.state.loadState,
className: 'demo-class-name',
trigger: ['view', 'click'],
onLoadMore: me.onLoadMore.bind(me),
locale: 'zh-cn',
viewLoadDelay: 150,
loadText: '查看更多',
loadingText: '加载中',
noMoreText: '没有更多',
};
return (
<div className="demo-content">
{me.state.lines}
<LoadMore {...props} />
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById('components-load-more-demo-basic'));
.demo-content {
margin: 10px auto;
max-height: 300px;
overflow: auto;
}
.demo-content p {
text-align: center;
font-size: 14px;
background: #fafafa;
height: 30px;
line-height: 30px;
}
Props
配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|---|
status | string | optional | 'loaded' | 表示加载状态。'loaded'表示加载完成,待下次加载;'loading'表示加载中;'noMore'表示没有更多 |
className | string | optional | '' | 额外的className |
trigger | array | optional | ['view', 'click'] | 触发加载回调的途径。view表示看到即触发;click表示点击触发 |
onLoadMore | function | required | - | 加载回调, 需要在该方法中手动控制status改变 |
viewLoadDelay | number | optional | 150 | 如果trigger包含'view',那么滚动停止后触发onLoadMore的延迟,单位毫秒 |
locale | string | optional | 'zh-cn' | 语言,另可选'en-us' |
loadText | string | optional | - | 加载更多文案,可手动设置覆盖默认文案 |
loadingText | string | optional | - | 加载中文案,可手动设置覆盖默认文案 |
noMoreText | string | optional | - | 没有数据文案,可手动设置覆盖默认文案 |