uxcore.js - React UI Component Set

组件演示

[{"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\">import classnames from 'classnames';;\n\nimport { LoadMore } from 'uxcore';\n\nlet loadTimes = 0;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n loadState: 'loaded', // loading noMore\n lines: [],\n };\n }\n\n onLoadMore() {\n const me = this;\n\n me.setState({\n loadState: 'loading',\n });\n\n setTimeout(() => {\n const lines = me.state.lines;\n\n if (++loadTimes < 5) {\n for (let i = 0; i < 50; i++) {\n lines.push(<p key={`${loadTimes}-${i}`}>第{loadTimes}次加载，当前是第{i + 1}条数据</p>);\n }\n\n me.setState({\n lines,\n loadState: 'loaded',\n });\n } else {\n me.setState({\n loadState: 'noMore',\n });\n }\n }, 1000);\n }\n\n render() {\n const me = this;\n\n const 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 (\n <div className=\"demo-content\">\n {me.state.lines}\n <LoadMore {...props} />\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-load-more-demo-basic'));</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\">.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}</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	-	没有数据文案，可手动设置覆盖默认文案