├── .npmignore
├── README.md
├── dist
    ├── index.js
    ├── loading.svga
    ├── reactLoadMore.js
    └── reactLoadMore.scss
├── example
    ├── data.js
    ├── index.html
    └── index.js
├── package-lock.json
├── package.json
├── react-loadmore-snapshot.gif
├── react-loadmore-snapshot.mov
├── src
    ├── index.js
    ├── loading.svga
    ├── reactLoadMore.js
    └── reactLoadMore.scss
└── webpack.config.js


/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | .babelrc
3 | .gitignore
4 | webpack.config.js


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SnapShots
 2 | 
 3 | a load more list component base on React
 4 | 
 5 | ![](https://res.unclewarren.cn/react-loadmore-snapshot.gif)
 6 | ---
 7 | 
 8 | # react-more-load
 9 | 
10 | ```
11 | $ npm install --save  react-more-load
12 | ```
13 | 
14 | # how to use
15 | ```
16 |   import ReactLoadMore from "react-more-load";
17 |   const NoResult = ()=> <span>No more Result,~~</span>;
18 |   const Footer = ()=> <span>loading....~~</span>;
19 |  <ReactLoadMore
20 |         onBottom={this.loadMore.bind(this)}
21 |         fetching={fetching}
22 |         hasMore={hasMore}
23 |         NoResult={NoResult}
24 |         Footer={null}
25 |       >
26 |         {dataList.map((item,index) => {
27 |           return (
28 |             <div style={{ height: "35vw", position: "relative" }} key={index}>
29 |               <img
30 |                 src={item.extra.thumbnail_pic}
31 |                 style={{
32 |                   width: "40vw",
33 |                   height: "25w",
34 |                   borderRadius:'3vw',
35 |                   position: "absolute",
36 |                   top: "2vw",
37 |                   left: "2vw"
38 |                 }}
39 |               />
40 |               <span style={{ fontSize: "4vw", position: "absolute",
41 |                   top: "5vw",
42 |                   fontWeight:'bold',
43 |                   left: "46vw"}}>{item.title}</span>
44 |             </div>
45 |           );
46 |         })}
47 |       </ReactLoadMore>
48 | ```
49 | you can also fork the code and `npm start` to run the example.
50 | 
51 | ## props 
52 | 
53 | | params        | type   |  desc  | necessary |
54 | | --------   | -----:  | :----:  |:----:  |
55 | | onBottom | func | when the user scroll to the bottom| true|
56 | | fetching | bool | isFetchingData| true|
57 | | hasMore | bool | has more data| true|
58 | | NoResult | func | return the ui dom of no result | false|
59 | | Footer | func | return the ui dom loading Footer | false|
60 | 
61 | 
62 | ## more
63 | you can fork and check the example code to see the fully complishment.
64 | 
65 | **If you have any of ideas,don't forget to leave an issue! And also star haha**
66 | 
67 | ## License
68 | 
69 | ISC
70 | 


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _reactLoadMore = require("./reactLoadMore");
 8 | 
 9 | var _reactLoadMore2 = _interopRequireDefault(_reactLoadMore);
10 | 
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12 | 
13 | exports.default = _reactLoadMore2.default;


--------------------------------------------------------------------------------
/dist/loading.svga:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WarrenJones/react-loadmore/449b102bd7283b202d7ede5ab1440c9e3fa27d5b/dist/loading.svga


--------------------------------------------------------------------------------
/dist/reactLoadMore.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | Object.defineProperty(exports, "__esModule", {
  4 |   value: true
  5 | });
  6 | 
  7 | var _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; }; }();
  8 | 
  9 | var _react = require("react");
 10 | 
 11 | var _react2 = _interopRequireDefault(_react);
 12 | 
 13 | var _propTypes = require("prop-types");
 14 | 
 15 | var _propTypes2 = _interopRequireDefault(_propTypes);
 16 | 
 17 | require("./reactLoadMore.scss");
 18 | 
 19 | var _classnames = require("classnames");
 20 | 
 21 | var _classnames2 = _interopRequireDefault(_classnames);
 22 | 
 23 | var _intersectionObserverPolyfill = require("intersection-observer-polyfill");
 24 | 
 25 | var _intersectionObserverPolyfill2 = _interopRequireDefault(_intersectionObserverPolyfill);
 26 | 
 27 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 28 | 
 29 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 30 | 
 31 | function _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; }
 32 | 
 33 | function _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; }
 34 | //这是intersection的polyfill
 35 | 
 36 | 
 37 | var ReactLoadMore = function (_React$Component) {
 38 |   _inherits(ReactLoadMore, _React$Component);
 39 | 
 40 |   function ReactLoadMore() {
 41 |     _classCallCheck(this, ReactLoadMore);
 42 | 
 43 |     var _this = _possibleConstructorReturn(this, (ReactLoadMore.__proto__ || Object.getPrototypeOf(ReactLoadMore)).apply(this, arguments));
 44 | 
 45 |     _this.insideViewportCb = _this.insideViewportCb.bind(_this);
 46 |     return _this;
 47 |   }
 48 | 
 49 |   _createClass(ReactLoadMore, [{
 50 |     key: "componentDidMount",
 51 |     value: function componentDidMount() {
 52 |       if (!this.props.Footer) this._svgaLoad();
 53 |       try {
 54 |         var node = document.getElementById('bottom');
 55 |         this.observer = new _intersectionObserverPolyfill2.default(this.insideViewportCb);
 56 |         this.observer.observe(node);
 57 |       } catch (err) {
 58 |         console.log("err in finding node", err);
 59 |       }
 60 |       window.addEventListener("scroll", this.handleOnScroll);
 61 |     }
 62 |   }, {
 63 |     key: "insideViewportCb",
 64 |     value: function insideViewportCb(entries) {
 65 |       var _props = this.props,
 66 |           fetching = _props.fetching,
 67 |           onBottom = _props.onBottom;
 68 | 
 69 |       entries.forEach(function (element) {
 70 |         //在viewport里面
 71 |         if (element.intersectionRatio > 0 && !fetching) {
 72 |           onBottom();
 73 |         }
 74 |       });
 75 |     }
 76 |   }, {
 77 |     key: "componentWillUnmount",
 78 |     value: function componentWillUnmount() {
 79 |       if (this.observer) {
 80 |         this.observer = null;
 81 |       }
 82 |     }
 83 |   }, {
 84 |     key: "_svgaLoad",
 85 |     value: function _svgaLoad() {
 86 |       var SVGA = require("svgaplayerweb");
 87 |       var player = new SVGA.Player("#foot_loader");
 88 |       var parser = new SVGA.Parser("#foot_loader"); // Must Provide same selector eg:#demoCanvas IF support IE6+
 89 |       parser.load(require("./loading.svga"), function (videoItem) {
 90 |         player.setVideoItem(videoItem);
 91 |         player.startAnimation();
 92 |       });
 93 |     }
 94 |   }, {
 95 |     key: "render",
 96 |     value: function render() {
 97 |       var _props2 = this.props,
 98 |           className = _props2.className,
 99 |           children = _props2.children,
100 |           hasMore = _props2.hasMore,
101 |           Footer = _props2.Footer,
102 |           NoResult = _props2.NoResult;
103 | 
104 |       return _react2.default.createElement(
105 |         "div",
106 |         { className: "infinite-scroll" },
107 |         _react2.default.createElement(
108 |           "div",
109 |           { className: (0, _classnames2.default)(className) },
110 |           children,
111 |           " "
112 |         ),
113 |         _react2.default.createElement(
114 |           "div",
115 |           { style: { clear: "both" } },
116 |           " "
117 |         ),
118 |         _react2.default.createElement(
119 |           "div",
120 |           { style: { display: hasMore ? "block" : "none" }, id: "bottom" },
121 |           Footer ? _react2.default.createElement(Footer, null) : _react2.default.createElement(
122 |             "div",
123 |             { className: "list-loader" },
124 |             _react2.default.createElement("div", { id: "foot_loader" })
125 |           )
126 |         ),
127 |         _react2.default.createElement(
128 |           "div",
129 |           {
130 |             className: "no-result",
131 |             style: { display: hasMore ? "none" : "block" }
132 |           },
133 |           NoResult ? _react2.default.createElement(NoResult, null) : "No more result"
134 |         )
135 |       );
136 |     }
137 |   }]);
138 | 
139 |   return ReactLoadMore;
140 | }(_react2.default.Component);
141 | 
142 | ReactLoadMore.propTypes = {
143 |   onBottom: _propTypes2.default.func,
144 |   fetching: _propTypes2.default.bool,
145 |   hasMore: _propTypes2.default.bool,
146 |   NoResult: _propTypes2.default.func,
147 |   Footer: _propTypes2.default.func
148 | };
149 | exports.default = ReactLoadMore;


--------------------------------------------------------------------------------
/dist/reactLoadMore.scss:
--------------------------------------------------------------------------------
 1 | @function px2vw($px, $base-font-size: 7.5px) {
 2 |   @return ($px / $base-font-size) * 1vw;
 3 | }
 4 | 
 5 | 
 6 | .infinite-scroll {
 7 |   position: relative;
 8 |   min-height: px2vw(240px);
 9 |   .no-result {
10 |     padding: px2vw(20px) 0;
11 |     
12 |     text-align: center;
13 |     color: #8fcfff;
14 |     font-size: px2vw(36px);
15 |     line-height: px2vw(42px);
16 |     font-family: ChalkboardSE;
17 |   }
18 |   .list-loader {
19 |     margin: auto;
20 |     width: px2vw(120px);
21 |     height: px2vw(120px);
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/example/data.js:
--------------------------------------------------------------------------------
  1 | export default [
  2 |   {
  3 |     id: 376788,
  4 |     title:
  5 |       "5.24\u65e9\u95f4\u884c\u60c5\uff1aBTC\u7ee7\u7eed\u76d8\u6574 \u5371\u673a\u5e76\u672a\u89e3\u9664",
  6 |     short_title:
  7 |       "5.24\u65e9\u95f4\u884c\u60c5\uff1aBTC\u7ee7\u7eed\u76d8\u6574 \u5371\u673a\u5e76\u672a\u89e3\u9664",
  8 |     type: 1,
  9 |     order: 0,
 10 |     is_top: false,
 11 |     extra: {
 12 |       child_id: 364682,
 13 |       version: "9.9.9",
 14 |       topic_id: 374682,
 15 |       summary:
 16 |         "BTC\u7ee7\u7eed\u76d8\u6574\uff0c\u5371\u673a\u5e76\u672a\u89e3\u9664",
 17 |       published_at: 1558659072,
 18 |       author: "\u91d1\u8272\u76d8\u9762",
 19 |       author_avatar: "https://img.jinse.com/949170_image20.png",
 20 |       author_id: 170255,
 21 |       author_level: 1,
 22 |       read_number: 76516,
 23 |       read_number_yuan: "7.7\u4e07",
 24 |       thumbnail_pic: "https://img.jinse.com/1596279_small.png",
 25 |       thumbnails_pics: ["https://img.jinse.com/1596279_small.png"],
 26 |       topic_type: 1,
 27 |       thumbnail_type: 1,
 28 |       source: null,
 29 |       topic_url: "https://m.jinse.com/news/blockchain/374682.html",
 30 |       attribute_exclusive: "",
 31 |       attribute_depth: "",
 32 |       attribute_live_broadcast: "",
 33 |       attribute_spread: "",
 34 |       extra_type: 0
 35 |     }
 36 |   },
 37 |   {
 38 |     id: 376773,
 39 |     title:
 40 |       "\u91d1\u8272\u65e9\u62a5-\u8d75\u957f\u9e4f\uff1a\u4e0d\u5f97\u4e0d\u53cd\u8bc9\u7ea2\u886b\u5e76\u516c\u5f00\u7ed3\u679c \u66fe\u57ab\u4ed877.9\u4e07\u7f8e\u5143\u6cd5\u5f8b\u8d39\u7528",
 41 |     short_title:
 42 |       "\u91d1\u8272\u65e9\u62a5-\u8d75\u957f\u9e4f\uff1a\u4e0d\u5f97\u4e0d\u53cd\u8bc9\u7ea2\u886b\u5e76\u516c\u5f00\u7ed3\u679c",
 43 |     type: 1,
 44 |     order: 0,
 45 |     is_top: false,
 46 |     extra: {
 47 |       child_id: 364671,
 48 |       version: "9.9.9",
 49 |       topic_id: 374671,
 50 |       summary:
 51 |         "\u91d1\u8272\u8d22\u7ecf\u63a8\u51fa\u6570\u5b57\u8d27\u5e01\u548c\u533a\u5757\u94fe\u884c\u4e1a\u65e9\u62a5\u300a\u91d1\u8272\u65e98\u70b9\u300b\u7b2c639\u671f\uff0c\u4e3a\u60a8\u63d0\u4f9b\u6700\u65b0\u3001\u6700\u5feb\u7684\u6570\u5b57\u8d27\u5e01\u548c\u533a\u5757\u94fe\u884c\u4e1a\u65b0\u95fb\u3002",
 52 |       published_at: 1558655237,
 53 |       author: "\u91d1\u8272\u65e98\u70b9",
 54 |       author_avatar: "https://img.jinse.com/1300870_image20.png",
 55 |       author_id: 22400,
 56 |       author_level: 1,
 57 |       read_number: 77666,
 58 |       read_number_yuan: "7.8\u4e07",
 59 |       thumbnail_pic: "https://img.jinse.com/1866489_small.png",
 60 |       thumbnails_pics: ["https://img.jinse.com/1866489_small.png"],
 61 |       topic_type: 1,
 62 |       thumbnail_type: 1,
 63 |       source: null,
 64 |       topic_url: "https://m.jinse.com/news/blockchain/374671.html",
 65 |       attribute_exclusive: "",
 66 |       attribute_depth: "",
 67 |       attribute_live_broadcast: "",
 68 |       attribute_spread: "",
 69 |       extra_type: 0
 70 |     }
 71 |   },
 72 |   {
 73 |     id: 377009,
 74 |     title:
 75 |       "\u533a\u5757\u94fe\u6e38\u620f\uff1a\u65e0\u5173\u6280\u672f \u53ea\u8981\u597d\u73a9",
 76 |     short_title:
 77 |       "\u533a\u5757\u94fe\u6e38\u620f\uff1a\u65e0\u5173\u6280\u672f \u53ea\u8981\u597d\u73a9",
 78 |     type: 1,
 79 |     order: 0,
 80 |     is_top: false,
 81 |     extra: {
 82 |       child_id: 364593,
 83 |       version: "9.9.9",
 84 |       topic_id: 374593,
 85 |       summary:
 86 |         "\u7eb5\u89c2\u533a\u5757\u94fe\u6e38\u620f\u884c\u4e1a\uff0c\u6e38\u620f\u624d\u662f\u6838\u5fc3\uff0c\u533a\u5757\u94fe\u53ea\u662f\u8f85\u52a9\u6280\u672f\u3002\u53ea\u6709\u6838\u5fc3\u6709\u4e86\u4ef7\u503c\uff0c\u8f85\u52a9\u624d\u80fd\u4f53\u73b0\u81ea\u5df1\u7684\u4f18\u52bf\u3002",
 87 |       published_at: 1558619559,
 88 |       author: "\u950c\u94fe\u63a5",
 89 |       author_avatar: "https://img.jinse.com/1424698_image20.png",
 90 |       author_id: 210243,
 91 |       author_level: 2,
 92 |       read_number: 30326,
 93 |       read_number_yuan: "3\u4e07",
 94 |       thumbnail_pic: "https://img.jinse.com/1865786_small.png",
 95 |       thumbnails_pics: ["https://img.jinse.com/1865786_small.png"],
 96 |       topic_type: 1,
 97 |       thumbnail_type: 1,
 98 |       source: "\u91d1\u8272\u8d22\u7ecf",
 99 |       topic_url: "https://m.jinse.com/blockchain/374593.html",
100 |       attribute_exclusive: "",
101 |       attribute_depth: "",
102 |       attribute_live_broadcast: "",
103 |       attribute_spread: "",
104 |       extra_type: 0
105 |     }
106 |   },
107 |   {
108 |     id: 377236,
109 |     title:
110 |       "\u7a33\u5b9a\u5e013.0\u62a5\u544a\u2014\u2014\u65b0\u7684\u5386\u53f2\u4f7f\u547d\u548c\u7ade\u4e89\u683c\u5c40",
111 |     short_title:
112 |       "\u7a33\u5b9a\u5e013.0\u62a5\u544a\u2014\u2014\u65b0\u7684\u5386\u53f2\u4f7f\u547d\u548c\u7ade\u4e89\u683c\u5c40",
113 |     type: 1,
114 |     order: 0,
115 |     is_top: false,
116 |     extra: {
117 |       child_id: 364589,
118 |       version: "9.9.9",
119 |       topic_id: 374589,
120 |       summary:
121 |         "\u7a33\u5b9a\u5e013.0\uff1a\u65b0\u578b\u533a\u5757\u94fe\u91d1\u878d\u548c\u5546\u4e1a\u751f\u6001\u5185\u7684\u201c\u8d27\u5e01\u201d\uff0c\u4ea4\u6613\u6240\u5927\u529b\u5e03\u5c40",
122 |       published_at: 1558619491,
123 |       author: "OK Research",
124 |       author_avatar: "https://img.jinse.com/1563315_image20.png",
125 |       author_id: 171209,
126 |       author_level: 2,
127 |       read_number: 26570,
128 |       read_number_yuan: "2.7\u4e07",
129 |       thumbnail_pic: "https://img.jinse.com/1865963_small.png",
130 |       thumbnails_pics: ["https://img.jinse.com/1865963_small.png"],
131 |       topic_type: 1,
132 |       thumbnail_type: 1,
133 |       source: "\u91d1\u8272\u8d22\u7ecf",
134 |       topic_url: "https://m.jinse.com/blockchain/374589.html",
135 |       attribute_exclusive: "",
136 |       attribute_depth: "",
137 |       attribute_live_broadcast: "",
138 |       attribute_spread: "",
139 |       extra_type: 0
140 |     }
141 |   },
142 |   {
143 |     id: 376598,
144 |     title:
145 |       "\u7f8e\u56fd\u603b\u7edf\u5019\u9009\u4eba\u7ade\u9009\u6350\u8d60\u90fd\u201c\u7231\u201d\u52a0\u5bc6\u8d27\u5e01",
146 |     short_title:
147 |       "\u7f8e\u56fd\u603b\u7edf\u5019\u9009\u4eba\u7ade\u9009\u6350\u8d60\u90fd\u201c\u7231\u201d\u52a0\u5bc6\u8d27\u5e01",
148 |     type: 1,
149 |     order: 0,
150 |     is_top: false,
151 |     extra: {
152 |       child_id: 364563,
153 |       version: "9.9.9",
154 |       topic_id: 374563,
155 |       summary:
156 |         "\u7f8e\u56fd\u6c11\u4e3b\u515a\u603b\u7edf\u5019\u9009\u4eba\u57c3\u91cc\u514b\u00b7\u65af\u74e6\u5c14\u5a01\u5c14\uff08Eric Swalwell\uff09\u5c06\u4f1a\u53c2\u52a02020\u5e74\u7684\u9009\u4e3e\uff0c\u4e0d\u8fc7\u548c\u5176\u4ed6\u5019\u9009\u4eba\u4e0d\u540c\u7684\u662f\uff0c\u4ed6\u63a5\u53d7\u52a0\u5bc6\u8d27\u5e01\u6350\u6b3e\u3002",
157 |       published_at: 1558615467,
158 |       author: "Jason.",
159 |       author_avatar: "https://img.jinse.com/1107080_image20.png",
160 |       author_id: 66917,
161 |       author_level: 1,
162 |       read_number: 125133,
163 |       read_number_yuan: "12.5\u4e07",
164 |       thumbnail_pic: "https://img.jinse.com/1865752_small.png",
165 |       thumbnails_pics: ["https://img.jinse.com/1865752_small.png"],
166 |       topic_type: 1,
167 |       thumbnail_type: 1,
168 |       source: null,
169 |       topic_url: "https://m.jinse.com/news/blockchain/374563.html",
170 |       attribute_exclusive: "",
171 |       attribute_depth: "",
172 |       attribute_live_broadcast: "",
173 |       attribute_spread: "",
174 |       extra_type: 0
175 |     }
176 |   },
177 |   {
178 |     id: 376588,
179 |     title:
180 |       "2\u4e2a\u5c0f\u5999\u62db\u8ba9\u4f60\u4e0d\u518d\u9519\u8fc7\u76c8\u522960%\u7684\u673a\u4f1a",
181 |     short_title:
182 |       "2\u4e2a\u5c0f\u5999\u62db\u8ba9\u4f60\u4e0d\u518d\u9519\u8fc7\u76c8\u522960%\u7684\u673a\u4f1a",
183 |     type: 1,
184 |     order: 0,
185 |     is_top: false,
186 |     extra: {
187 |       child_id: 364559,
188 |       version: "9.9.9",
189 |       topic_id: 374559,
190 |       summary:
191 |         "2\u4e2a\u5c0f\u5999\u62db\u8ba9\u4f60\u4e0d\u518d\u9519\u8fc7\u76c8\u522960%\u7684\u673a\u4f1a\uff01",
192 |       published_at: 1558615251,
193 |       author: "\u6570\u52a8\u6d3e",
194 |       author_avatar: "https://img.jinse.com/1332281_image20.png",
195 |       author_id: 174774,
196 |       author_level: 2,
197 |       read_number: 122549,
198 |       read_number_yuan: "12.3\u4e07",
199 |       thumbnail_pic: "https://img.jinse.com/1757612_small.png",
200 |       thumbnails_pics: ["https://img.jinse.com/1757612_small.png"],
201 |       topic_type: 1,
202 |       thumbnail_type: 1,
203 |       source: "\u91d1\u8272\u8d22\u7ecf",
204 |       topic_url: "https://m.jinse.com/blockchain/374559.html",
205 |       attribute_exclusive: "",
206 |       attribute_depth: "",
207 |       attribute_live_broadcast: "",
208 |       attribute_spread: "",
209 |       extra_type: 0
210 |     }
211 |   },
212 |   {
213 |     id: 376517,
214 |     title:
215 |       "2019\u52a0\u5bc6\u5e02\u573a\u91d1\u878d\u884c\u4e1a\u4e4b\u501f\u8d37\u9886\u57df\u4e13\u9898\u7814\u7a76\u62a5\u544a | TokenInsight",
216 |     short_title:
217 |       "2019\u52a0\u5bc6\u5e02\u573a\u91d1\u878d\u884c\u4e1a\u4e4b\u501f\u8d37\u9886\u57df\u4e13\u9898\u7814\u7a76\u62a5\u544a | TokenInsight",
218 |     type: 1,
219 |     order: 0,
220 |     is_top: false,
221 |     extra: {
222 |       child_id: 364524,
223 |       version: "9.9.9",
224 |       topic_id: 374524,
225 |       summary:
226 |         "\u77ed\u77ed\u4e00\u4e24\u5e74\uff0c\u501f\u8d37\u4e1a\u52a1\u5df2\u7ecf\u6210\u4e3aDeFi\u751f\u6001\u4e2d\u7684\u91cd\u8981\u7ec4\u6210\u90e8\u5206\uff0c\u5982\u6b32\u4e86\u89e3\u52a0\u5bc6\u8d44\u4ea7\u501f\u8d37\u5e02\u573a\uff0c\u8bf7\u9605\u8bfb\u8fd9\u4efd\u6216\u8bb8\u662f\u4e1a\u5185\u6700\u5168\u9762\u6700\u6df1\u5165\u7684\u5206\u6790\u62a5\u544a\u3002",
227 |       published_at: 1558614349,
228 |       author: "TokenInsight",
229 |       author_avatar: "https://img.jinse.com/1500864_image20.png",
230 |       author_id: 113109,
231 |       author_level: 2,
232 |       read_number: 119376,
233 |       read_number_yuan: "11.9\u4e07",
234 |       thumbnail_pic: "https://img.jinse.com/1865002_small.png",
235 |       thumbnails_pics: ["https://img.jinse.com/1865002_small.png"],
236 |       topic_type: 1,
237 |       thumbnail_type: 1,
238 |       source: "TokenInsight",
239 |       topic_url: "https://m.jinse.com/blockchain/374524.html",
240 |       attribute_exclusive: "",
241 |       attribute_depth: "",
242 |       attribute_live_broadcast: "",
243 |       attribute_spread: "",
244 |       extra_type: 0
245 |     }
246 |   },
247 |   {
248 |     id: 376507,
249 |     title:
250 |       "\u96be\u4ea7\u7684ETF\u3001\u8010\u4e0d\u4f4f\u7684CZ \u671f\u8d27\u5e02\u573a\u6216\u6210\u672a\u6765\u6700\u4f73\u9009\u62e9",
251 |     short_title:
252 |       "\u96be\u4ea7\u7684ETF\u3001\u8010\u4e0d\u4f4f\u7684CZ \u671f\u8d27\u5e02\u573a\u6210\u6700\u4f73\u9009\u62e9",
253 |     type: 1,
254 |     order: 0,
255 |     is_top: false,
256 |     extra: {
257 |       child_id: 364520,
258 |       version: "9.9.9",
259 |       topic_id: 374520,
260 |       summary:
261 |         "\u4e0d\u5e73\u51e1\u76845\u6708\uff0c\u6bd4\u7279\u5e01\u5927\u5e45\u6ce2\u52a8\uff0cETF\u518d\u9047\u63a8\u8fdf\uff0cCZ\u4e24\u53d1\u4e8b\u4ef6\uff0c\u671f\u8d27\u5e02\u573a\u6210\u672a\u6765\u6700\u4f73\u9009\u62e9\uff1f",
262 |       published_at: 1558613740,
263 |       author: "BCEX",
264 |       author_avatar: "https://img.jinse.com/320363_image20.png",
265 |       author_id: 24747,
266 |       author_level: 2,
267 |       read_number: 119696,
268 |       read_number_yuan: "12\u4e07",
269 |       thumbnail_pic: "https://img.jinse.com/1865661_small.png",
270 |       thumbnails_pics: ["https://img.jinse.com/1865661_small.png"],
271 |       topic_type: 1,
272 |       thumbnail_type: 1,
273 |       source: "\u91d1\u8272\u8d22\u7ecf",
274 |       topic_url: "https://m.jinse.com/blockchain/374520.html",
275 |       attribute_exclusive: "",
276 |       attribute_depth: "",
277 |       attribute_live_broadcast: "",
278 |       attribute_spread: "",
279 |       extra_type: 0
280 |     }
281 |   },
282 |   {
283 |     id: 376502,
284 |     title:
285 |       "\u521b\u65b0\u91d1\u878d\u8f6c\u63a5\u652f\u4ed8\u5982\u4f55\u5b9e\u73b0\u901a\u8bc1\u201c\u8d27\u5e01\u5316\u201d",
286 |     short_title:
287 |       "\u521b\u65b0\u91d1\u878d\u8f6c\u63a5\u652f\u4ed8\u5982\u4f55\u5b9e\u73b0\u901a\u8bc1\u201c\u8d27\u5e01\u5316\u201d",
288 |     type: 1,
289 |     order: 0,
290 |     is_top: false,
291 |     extra: {
292 |       child_id: 364518,
293 |       version: "9.9.9",
294 |       topic_id: 374518,
295 |       summary: "Zipper\uff0c\u4e3a\u91d1\u878d\u4e92\u8054\u800c\u751f\uff01",
296 |       published_at: 1558613256,
297 |       author: "Zipper\u57fa\u91d1\u4f1a",
298 |       author_avatar: "https://img.jinse.com/821325_image20.png",
299 |       author_id: 139425,
300 |       author_level: 2,
301 |       read_number: 120213,
302 |       read_number_yuan: "12\u4e07",
303 |       thumbnail_pic: "https://img.jinse.com/1865467_small.png",
304 |       thumbnails_pics: ["https://img.jinse.com/1865467_small.png"],
305 |       topic_type: 1,
306 |       thumbnail_type: 1,
307 |       source: "\u91d1\u8272\u8d22\u7ecf",
308 |       topic_url: "https://m.jinse.com/blockchain/374518.html",
309 |       attribute_exclusive: "",
310 |       attribute_depth: "",
311 |       attribute_live_broadcast: "",
312 |       attribute_spread: "\u63a8\u5e7f",
313 |       extra_type: 0
314 |     }
315 |   },
316 |   {
317 |     id: 376496,
318 |     title:
319 |       "WBFex\u738b\u8005\u5f52\u6765  \u201c\u4e0b\u4e00\u4e2a\u5e01\u5b89\u201d\u6df1\u5733\u542f\u822a",
320 |     short_title:
321 |       "WBFex\u738b\u8005\u5f52\u6765 \u201c\u4e0b\u4e00\u4e2a\u5e01\u5b89\u201d\u6df1\u5733\u542f\u822a",
322 |     type: 1,
323 |     order: 0,
324 |     is_top: false,
325 |     extra: {
326 |       child_id: 364515,
327 |       version: "9.9.9",
328 |       topic_id: 374515,
329 |       summary:
330 |         "5\u670823\u65e5\uff0c\u201c\u4e16\u754c\u6570\u5b57\u7ecf\u6d4e\u8bba\u575b\u66a8WBFex\u4e9a\u6d32\u542f\u52a8\u4eea\u5f0f\u201d\u5343\u4eba\u5927\u4f1a\u5728\u6df1\u5733\u5927\u4e2d\u534e\u559c\u6765\u767b\u9152\u5e97\u6210\u529f\u53ec\u5f00\u3002",
331 |       published_at: 1558613072,
332 |       author: "\u5c0f\u82b1\u7c89",
333 |       author_avatar: "https://img.jinse.com/663820_image20.png",
334 |       author_id: 110082,
335 |       author_level: 3,
336 |       read_number: 125231,
337 |       read_number_yuan: "12.5\u4e07",
338 |       thumbnail_pic: "https://img.jinse.com/1865614_small.png",
339 |       thumbnails_pics: ["https://img.jinse.com/1865614_small.png"],
340 |       topic_type: 1,
341 |       thumbnail_type: 1,
342 |       source: "WBFex",
343 |       topic_url: "https://m.jinse.com/blockchain/374515.html",
344 |       attribute_exclusive: "",
345 |       attribute_depth: "",
346 |       attribute_live_broadcast: "",
347 |       attribute_spread: "\u63a8\u5e7f",
348 |       extra_type: 0
349 |     }
350 |   },
351 |   {
352 |     id: 376473,
353 |     title:
354 |       "\u7f51\u53cb\u6012\u603c\u4ee5\u592a\u574a2.0  V\u795e\u5c45\u7136\u8fd8\u8981\u548c\u4ed6\u505a\u670b\u53cb\u4e28Fun Twitter",
355 |     short_title:
356 |       "\u7f51\u53cb\u6012\u5bf9\u4ee5\u592a\u574a2.0  V\u795e\u5c45\u7136\u8fd8\u8981\u548c\u4ed6\u505a\u670b\u53cb",
357 |     type: 1,
358 |     order: 0,
359 |     is_top: false,
360 |     extra: {
361 |       child_id: 364498,
362 |       version: "9.9.9",
363 |       topic_id: 374498,
364 |       summary:
365 |         "2019\u5e74\u4f0a\u59cb\uff0c\u91d1\u8272\u8d22\u7ecf\u63a8\u51fa\u5168\u65b0\u680f\u76ee\uff1aFun twitter\uff0c\u91d1\u8272\u8d22\u7ecf\u5c06\u4e3a\u60a8\u6536\u96c6\u6bcf\u65e5\u52a0\u5bc6\u4e16\u754c\u4e2d\u7684\u6d77\u5916\u610f\u89c1\u9886\u8896\u4e0e\u77e5\u540d\u5a92\u4f53\u5728\u63a8\u7279\u4e0a\u7684\u6709\u8da3\u63a8\u6587\u3002",
366 |       published_at: 1558612112,
367 |       author: "\u7f8e\u54b2",
368 |       author_avatar: "https://img.jinse.com/782516_image20.png",
369 |       author_id: 255249,
370 |       author_level: 1,
371 |       read_number: 136209,
372 |       read_number_yuan: "13.6\u4e07",
373 |       thumbnail_pic: "https://img.jinse.com/1865565_small.png",
374 |       thumbnails_pics: ["https://img.jinse.com/1865565_small.png"],
375 |       topic_type: 1,
376 |       thumbnail_type: 1,
377 |       source: null,
378 |       topic_url: "https://m.jinse.com/news/blockchain/374498.html",
379 |       attribute_exclusive: "",
380 |       attribute_depth: "",
381 |       attribute_live_broadcast: "",
382 |       attribute_spread: "",
383 |       extra_type: 0
384 |     }
385 |   },
386 |   {
387 |     id: 376469,
388 |     title: "BCH\u5c0f\u5e45\u56de\u62bd \u62c9\u9ad8\u51cf\u4ed3",
389 |     short_title: "BCH\u5c0f\u5e45\u56de\u62bd \u62c9\u9ad8\u51cf\u4ed3",
390 |     type: 1,
391 |     order: 0,
392 |     is_top: false,
393 |     extra: {
394 |       child_id: 364496,
395 |       version: "9.9.9",
396 |       topic_id: 374496,
397 |       summary: "BCH\u5c0f\u5e45\u56de\u62bd \u62c9\u9ad8\u51cf\u4ed3",
398 |       published_at: 1558611827,
399 |       author: "K\u795e",
400 |       author_avatar: "https://img.jinse.com/1669061_image20.png",
401 |       author_id: 254296,
402 |       author_level: 1,
403 |       read_number: 120872,
404 |       read_number_yuan: "12.1\u4e07",
405 |       thumbnail_pic: "https://img.jinse.com/1657623_small.png",
406 |       thumbnails_pics: ["https://img.jinse.com/1657623_small.png"],
407 |       topic_type: 1,
408 |       thumbnail_type: 1,
409 |       source: null,
410 |       topic_url: "https://m.jinse.com/news/blockchain/374496.html",
411 |       attribute_exclusive: "\u72ec\u5bb6",
412 |       attribute_depth: "",
413 |       attribute_live_broadcast: "",
414 |       attribute_spread: "",
415 |       extra_type: 0
416 |     }
417 |   },
418 |   {
419 |     id: 376455,
420 |     title:
421 |       "BTC\u8d44\u91d1\u6d41\u51fa81\u4ebf    \u5e84\u5bb6\u6d17\u76d8\u7ed3\u675f\uff1f",
422 |     short_title:
423 |       "BTC\u8d44\u91d1\u6d41\u51fa81\u4ebf    \u5e84\u5bb6\u6d17\u76d8\u7ed3\u675f\uff1f",
424 |     type: 1,
425 |     order: 0,
426 |     is_top: false,
427 |     extra: {
428 |       child_id: 364489,
429 |       version: "9.9.9",
430 |       topic_id: 374489,
431 |       summary:
432 |         "BTC\u8d44\u91d1\u6d41\u51fa81\u4ebf\uff0c\u5e84\u5bb6\u6d17\u76d8\u7ed3\u675f\uff1f",
433 |       published_at: 1558611039,
434 |       author: "\u4fdd\u7f57\u5927\u5e1d",
435 |       author_avatar: "https://img.jinse.com/1747514_image20.png",
436 |       author_id: 174775,
437 |       author_level: 3,
438 |       read_number: 132755,
439 |       read_number_yuan: "13.3\u4e07",
440 |       thumbnail_pic: "https://img.jinse.com/1833540_small.png",
441 |       thumbnails_pics: ["https://img.jinse.com/1833540_small.png"],
442 |       topic_type: 1,
443 |       thumbnail_type: 1,
444 |       source: "\u91d1\u8272\u8d22\u7ecf",
445 |       topic_url: "https://m.jinse.com/blockchain/374489.html",
446 |       attribute_exclusive: "",
447 |       attribute_depth: "",
448 |       attribute_live_broadcast: "",
449 |       attribute_spread: "",
450 |       extra_type: 0
451 |     }
452 |   },
453 |   {
454 |     id: 376442,
455 |     title:
456 |       "\u5229\u5bb3\u6538\u5173\uff1a\u533a\u5757\u94fe\u6cbb\u7406\u5982\u4f55\u5728Cryptopia\u7684\u9ed1\u5ba2\u653b\u51fb\u4e2d\u627e\u5230\u51fa\u8def",
457 |     short_title:
458 |       "\u533a\u5757\u94fe\u6cbb\u7406\u5982\u4f55\u5728\u9ed1\u5ba2\u653b\u51fb\u4e2d\u627e\u5230\u51fa\u8def\uff1f",
459 |     type: 1,
460 |     order: 0,
461 |     is_top: false,
462 |     extra: {
463 |       child_id: 364449,
464 |       version: "9.9.9",
465 |       topic_id: 374449,
466 |       summary:
467 |         "\u5982\u679c\u6743\u529b\u4e0b\u653e\u63d0\u4f9b\u4e86\u4ee5\u6cbb\u7406\u4e3a\u57fa\u7840\u7684\u6c11\u4e3b\uff0c\u672c\u8d28\u4e0a\u662f\u5c06\u516c\u5e73\u786c\u7f16\u7801\u5230\u5b83\u4eec\u7684\u7cfb\u7edf\u4e2d\uff0c\u90a3\u4e48\u53c2\u4e0e\u8fd9\u4e9b\u6c11\u4e3b\u5c31\u6210\u4e3a\u8fd9\u9879\u4f7f\u547d\u7684\u5173\u952e\u3002",
468 |       published_at: 1558609974,
469 |       author: "\u533a\u5757\u94fe\u65b0\u91d1\u878d",
470 |       author_avatar: "https://img.jinse.com/1066390_image20.png",
471 |       author_id: 116890,
472 |       author_level: 5,
473 |       read_number: 120897,
474 |       read_number_yuan: "12.1\u4e07",
475 |       thumbnail_pic: "https://img.jinse.com/1865183_small.png",
476 |       thumbnails_pics: ["https://img.jinse.com/1865183_small.png"],
477 |       topic_type: 1,
478 |       thumbnail_type: 1,
479 |       source: "\u533a\u5757\u94fe\u65b0\u91d1\u878d",
480 |       topic_url: "https://m.jinse.com/blockchain/374449.html",
481 |       attribute_exclusive: "",
482 |       attribute_depth: "",
483 |       attribute_live_broadcast: "",
484 |       attribute_spread: "",
485 |       extra_type: 0
486 |     }
487 |   },
488 |   {
489 |     id: 376435,
490 |     title:
491 |       "\u4e3a\u4ec0\u4e48\u6bd4\u7279\u5e01\u628a\u5c71\u5be8\u5e01\u90fd\u629b\u5728\u4e86\u8eab\u540e",
492 |     short_title:
493 |       "\u4e3a\u4ec0\u4e48\u6bd4\u7279\u5e01\u628a\u5c71\u5be8\u5e01\u90fd\u629b\u5728\u4e86\u8eab\u540e",
494 |     type: 1,
495 |     order: 0,
496 |     is_top: false,
497 |     extra: {
498 |       child_id: 364452,
499 |       version: "9.9.9",
500 |       topic_id: 374452,
501 |       summary:
502 |         "\u4ece\u673a\u6784\u3001\u5e02\u573a\u3001\u5468\u671f\u3001\u9879\u76ee\u7b49\u5404\u65b9\u9762\u770b\u7ade\u4e89\u5e01\u3002",
503 |       published_at: 1558609727,
504 |       author: "\u533a\u5757\u94fe\u65b0\u91d1\u878d",
505 |       author_avatar: "https://img.jinse.com/1066390_image20.png",
506 |       author_id: 116890,
507 |       author_level: 5,
508 |       read_number: 128732,
509 |       read_number_yuan: "12.9\u4e07",
510 |       thumbnail_pic: "https://img.jinse.com/1865197_small.png",
511 |       thumbnails_pics: ["https://img.jinse.com/1865197_small.png"],
512 |       topic_type: 1,
513 |       thumbnail_type: 1,
514 |       source: "\u533a\u5757\u94fe\u65b0\u91d1\u878d",
515 |       topic_url: "https://m.jinse.com/blockchain/374452.html",
516 |       attribute_exclusive: "",
517 |       attribute_depth: "",
518 |       attribute_live_broadcast: "",
519 |       attribute_spread: "",
520 |       extra_type: 0
521 |     }
522 |   },
523 |   {
524 |     id: 376431,
525 |     title:
526 |       "\u624b\u6495\u7ea2\u6749\u3001\u76d7\u5e01\u5168\u8d54 \u8d75\u957f\u9e4f\u7684\u5e95\u6c14\u4ece\u4f55\u800c\u6765\uff1f",
527 |     short_title:
528 |       "\u624b\u6495\u7ea2\u6749\u3001\u76d7\u5e01\u5168\u8d54 \u8d75\u957f\u9e4f\u7684\u5e95\u6c14\u4ece\u4f55\u800c\u6765\uff1f",
529 |     type: 1,
530 |     order: 0,
531 |     is_top: false,
532 |     extra: {
533 |       child_id: 364453,
534 |       version: "9.9.9",
535 |       topic_id: 374453,
536 |       summary: "\u7ea2\u6749\u4f4e\u4f30\u4e86\u8d75\u957f\u9e4f\u3002",
537 |       published_at: 1558609511,
538 |       author: "CoinVoice",
539 |       author_avatar: "https://img.jinse.com/1614987_image20.png",
540 |       author_id: 253452,
541 |       author_level: 0,
542 |       read_number: 120739,
543 |       read_number_yuan: "12.1\u4e07",
544 |       thumbnail_pic: "https://img.jinse.com/1865229_small.png",
545 |       thumbnails_pics: ["https://img.jinse.com/1865229_small.png"],
546 |       topic_type: 1,
547 |       thumbnail_type: 1,
548 |       source: "CoinVoice",
549 |       topic_url: "https://m.jinse.com/blockchain/374453.html",
550 |       attribute_exclusive: "",
551 |       attribute_depth: "",
552 |       attribute_live_broadcast: "",
553 |       attribute_spread: "",
554 |       extra_type: 0
555 |     }
556 |   },
557 |   {
558 |     id: 376427,
559 |     title:
560 |       "\u4e00\u6587\u770b\u61c2EOS\u4e0a\u6700\u53cb\u597d\u4fa7\u94fe\u53ca\u5176\u793e\u533a\u5316\u6cbb\u7406\u6a21\u5f0f",
561 |     short_title:
562 |       "\u4e00\u6587\u770b\u61c2EOS\u4e0a\u6700\u53cb\u597d\u4fa7\u94fe\u53ca\u793e\u533a\u5316\u6cbb\u7406\u6a21\u5f0f",
563 |     type: 1,
564 |     order: 0,
565 |     is_top: false,
566 |     extra: {
567 |       child_id: 364465,
568 |       version: "9.9.9",
569 |       topic_id: 374465,
570 |       summary:
571 |         "EOS\u751f\u6001\u7206\u53d1\u7684\u5927\u95e8\u8fd8\u8981\u4ef0\u4ed7BOSCore\u8fd9\u6761\u4fa7\u94fe\u6765\u5f00\u542f\uff1f",
572 |       published_at: 1558609268,
573 |       author: "\u4e2d\u672c\u5c0f\u8471",
574 |       author_avatar: "//resource.jinse.com/www/v2/img/avatar.png",
575 |       author_id: 257173,
576 |       author_level: 0,
577 |       read_number: 117914,
578 |       read_number_yuan: "11.8\u4e07",
579 |       thumbnail_pic: "https://img.jinse.com/1865310_small.png",
580 |       thumbnails_pics: ["https://img.jinse.com/1865310_small.png"],
581 |       topic_type: 1,
582 |       thumbnail_type: 1,
583 |       source: "\u4e2d\u672c\u5c0f\u8471",
584 |       topic_url: "https://m.jinse.com/blockchain/374465.html",
585 |       attribute_exclusive: "",
586 |       attribute_depth: "",
587 |       attribute_live_broadcast: "",
588 |       attribute_spread: "",
589 |       extra_type: 0
590 |     }
591 |   },
592 |   {
593 |     id: 376420,
594 |     title:
595 |       "\u767e\u82b1\u6751\u533a\u5757\u94fe\u5c71\u7684\u9009\u6c11\u4eec \u8d85\u6709\u8da3",
596 |     short_title:
597 |       "\u767e\u82b1\u6751\u533a\u5757\u94fe\u5c71\u7684\u9009\u6c11\u4eec \u8d85\u6709\u8da3",
598 |     type: 1,
599 |     order: 0,
600 |     is_top: false,
601 |     extra: {
602 |       child_id: 364451,
603 |       version: "9.9.9",
604 |       topic_id: 374451,
605 |       summary:
606 |         "\u6751\u6c11\u9009\u4e3e\uff0c\u5173\u300c\u5171\u8bc6\u7b97\u6cd5\u300d\u4ec0\u4e48\u4e8b\u513f\uff1f",
607 |       published_at: 1558609062,
608 |       author: "\u533a\u5757\u94fe\u5927\u672c\u8425",
609 |       author_avatar: "https://img.jinse.com/581296_image20.png",
610 |       author_id: 94231,
611 |       author_level: 2,
612 |       read_number: 94835,
613 |       read_number_yuan: "9.5\u4e07",
614 |       thumbnail_pic: "https://img.jinse.com/1865191_small.png",
615 |       thumbnails_pics: ["https://img.jinse.com/1865191_small.png"],
616 |       topic_type: 1,
617 |       thumbnail_type: 1,
618 |       source: "\u533a\u5757\u94fe\u5927\u672c\u8425",
619 |       topic_url: "https://m.jinse.com/blockchain/374451.html",
620 |       attribute_exclusive: "",
621 |       attribute_depth: "",
622 |       attribute_live_broadcast: "",
623 |       attribute_spread: "",
624 |       extra_type: 0
625 |     }
626 |   },
627 |   {
628 |     id: 376374,
629 |     title:
630 |       "5.23\u665a\u95f4\u884c\u60c5\uff1a\u8fd9\u4e2a\u70b9\u51b3\u5b9a\u8fd1\u671f\u8d70\u52bf",
631 |     short_title:
632 |       "5.23\u665a\u95f4\u884c\u60c5\uff1a\u8fd9\u4e2a\u70b9\u51b3\u5b9a\u8fd1\u671f\u8d70\u52bf",
633 |     type: 1,
634 |     order: 0,
635 |     is_top: false,
636 |     extra: {
637 |       child_id: 364446,
638 |       version: "9.9.9",
639 |       topic_id: 374446,
640 |       summary:
641 |         "BTC\u80fd\u5426\u53cd\u5f39\u5230\u8fd9\u4e2a\u70b9\uff0c\u5c06\u51b3\u5b9a\u8fd1\u671f\u7684\u8d70\u52bf\uff01",
642 |       published_at: 1558607335,
643 |       author: "\u91d1\u8272\u76d8\u9762",
644 |       author_avatar: "https://img.jinse.com/949170_image20.png",
645 |       author_id: 170255,
646 |       author_level: 1,
647 |       read_number: 106986,
648 |       read_number_yuan: "10.7\u4e07",
649 |       thumbnail_pic: "https://img.jinse.com/1688483_small.png",
650 |       thumbnails_pics: ["https://img.jinse.com/1688483_small.png"],
651 |       topic_type: 1,
652 |       thumbnail_type: 1,
653 |       source: null,
654 |       topic_url: "https://m.jinse.com/news/blockchain/374446.html",
655 |       attribute_exclusive: "\u72ec\u5bb6",
656 |       attribute_depth: "",
657 |       attribute_live_broadcast: "",
658 |       attribute_spread: "",
659 |       extra_type: 0
660 |     }
661 |   },
662 |   {
663 |     id: 376362,
664 |     title:
665 |       "DRE\u4e0a\u7ebfGOKO\u4ea4\u6613\u6240\u4ec524\u5c0f\u65f6 \u6700\u9ad8\u6da8\u5e45\u7adf\u8fbe612%",
666 |     short_title:
667 |       "DRE\u4e0a\u7ebfGOKO\u4ea4\u6613\u6240\u4ec524\u5c0f\u65f6 \u6700\u9ad8\u6da8\u5e45\u8fbe612%",
668 |     type: 1,
669 |     order: 0,
670 |     is_top: false,
671 |     extra: {
672 |       child_id: 364434,
673 |       version: "9.9.9",
674 |       topic_id: 374434,
675 |       summary:
676 |         "20\u4e07DRE\u4efb\u6027\u6492\uff0c\u8c01\u5148\u6765\u4e86\u5c31\u7ed9\u4ed6\uff01",
677 |       published_at: 1558605750,
678 |       author: "bitbitboy",
679 |       author_avatar: "https://img.jinse.com/1139577_image20.png",
680 |       author_id: 195537,
681 |       author_level: 3,
682 |       read_number: 100052,
683 |       read_number_yuan: "10\u4e07",
684 |       thumbnail_pic: "https://img.jinse.com/1864970_small.png",
685 |       thumbnails_pics: ["https://img.jinse.com/1864970_small.png"],
686 |       topic_type: 1,
687 |       thumbnail_type: 1,
688 |       source: "\u91d1\u8272\u8d22\u7ecf",
689 |       topic_url: "https://m.jinse.com/blockchain/374434.html",
690 |       attribute_exclusive: "",
691 |       attribute_depth: "",
692 |       attribute_live_broadcast: "",
693 |       attribute_spread: "\u63a8\u5e7f",
694 |       extra_type: 0
695 |     }
696 |   },
697 |   {
698 |     id: 376342,
699 |     title: "TLAB \u65e5\u62a5 | \u8fdb\u51fb\u7684\u706b\u817f",
700 |     short_title: "TLAB \u65e5\u62a5 | \u8fdb\u51fb\u7684\u706b\u817f",
701 |     type: 1,
702 |     order: 0,
703 |     is_top: false,
704 |     extra: {
705 |       child_id: 364428,
706 |       version: "9.9.9",
707 |       topic_id: 374428,
708 |       summary:
709 |         "\u200b\n\n\n\u4eca\u65e5\u6295\u8d44\u5efa\u8bae\n\n\nHT/USDT \u6295\u8d44\u5efa\u8bae\uff1a\n\u4e70\u5165\u4ef7\uff1a2.8\u9644\u8fd1\n\nBNB/USDT \u6295\u8d44\u5efa\u8bae\uff1a\n\u4e70\u5165\u4ef7\uff1a29.5\u9644\u8fd1\n\n\n01\n\u4ea7\u4e1a\u89e3\u8bfb\n\n\u5e74\u521dHT\u8d70",
710 |       published_at: 1558605629,
711 |       author: "TLAB",
712 |       author_avatar: "https://img.jinse.com/1778828_image20.png",
713 |       author_id: 124176,
714 |       author_level: 2,
715 |       read_number: 100077,
716 |       read_number_yuan: "10\u4e07",
717 |       thumbnail_pic: "https://img.jinse.com/1864973_small.png",
718 |       thumbnails_pics: ["https://img.jinse.com/1864973_small.png"],
719 |       topic_type: 1,
720 |       thumbnail_type: 1,
721 |       source: "\u91d1\u8272\u8d22\u7ecf",
722 |       topic_url: "https://m.jinse.com/blockchain/374428.html",
723 |       attribute_exclusive: "",
724 |       attribute_depth: "",
725 |       attribute_live_broadcast: "",
726 |       attribute_spread: "",
727 |       extra_type: 0
728 |     }
729 |   },
730 |   {
731 |     id: 376309,
732 |     title:
733 |       "EOS\u5373\u5c06\u6b7b\u53c9 \u4e3b\u529b\u6216\u5c06\u8bf1\u591a\u7206\u7a7a\u62c9\u76d8",
734 |     short_title:
735 |       "EOS\u5373\u5c06\u6b7b\u53c9 \u4e3b\u529b\u6216\u5c06\u8bf1\u591a\u7206\u7a7a\u62c9\u76d8",
736 |     type: 1,
737 |     order: 0,
738 |     is_top: false,
739 |     extra: {
740 |       child_id: 364413,
741 |       version: "9.9.9",
742 |       topic_id: 374413,
743 |       summary:
744 |         "EOS\u5373\u5c06\u6b7b\u53c9 \u4e3b\u529b\u6216\u5c06\u8bf1\u591a\u7206\u7a7a\u62c9\u76d8",
745 |       published_at: 1558604847,
746 |       author: "K\u795e",
747 |       author_avatar: "https://img.jinse.com/1669061_image20.png",
748 |       author_id: 254296,
749 |       author_level: 1,
750 |       read_number: 100218,
751 |       read_number_yuan: "10\u4e07",
752 |       thumbnail_pic: "https://img.jinse.com/1657623_small.png",
753 |       thumbnails_pics: ["https://img.jinse.com/1657623_small.png"],
754 |       topic_type: 1,
755 |       thumbnail_type: 1,
756 |       source: null,
757 |       topic_url: "https://m.jinse.com/news/blockchain/374413.html",
758 |       attribute_exclusive: "\u72ec\u5bb6",
759 |       attribute_depth: "",
760 |       attribute_live_broadcast: "",
761 |       attribute_spread: "",
762 |       extra_type: 0
763 |     }
764 |   },
765 |   {
766 |     id: 376321,
767 |     title:
768 |       "\u798f\u5e03\u65af\uff1a\u5236\u8ba2\u76d1\u7ba1\u6807\u51c6 \u4e2d\u56fd\u6b63\u62e5\u62b1\u533a\u5757\u94fe",
769 |     short_title:
770 |       "\u798f\u5e03\u65af\uff1a\u5236\u8ba2\u76d1\u7ba1\u6807\u51c6 \u4e2d\u56fd\u6b63\u62e5\u62b1\u533a\u5757\u94fe",
771 |     type: 1,
772 |     order: 0,
773 |     is_top: false,
774 |     extra: {
775 |       child_id: 364408,
776 |       version: "9.9.9",
777 |       topic_id: 374408,
778 |       summary:
779 |         "\u8d8a\u6765\u8d8a\u591a\u7684\u8ff9\u8c61\u8868\u660e\uff0c\u4e2d\u56fd\u8fd9\u4e2a\u4e16\u754c\u7b2c\u4e8c\u5927\u7ecf\u6d4e\u4f53\u5df2\u7ecf\u66f4\u5e7f\u6cdb\u7684\u63a5\u53d7\u533a\u5757\u94fe\u6280\u672f\u3002",
780 |       published_at: 1558604690,
781 |       author: "\u94fe\u95fb ChainNews",
782 |       author_avatar: "https://img.jinse.com/781236_image20.png",
783 |       author_id: 137223,
784 |       author_level: 5,
785 |       read_number: 96004,
786 |       read_number_yuan: "9.6\u4e07",
787 |       thumbnail_pic: "https://img.jinse.com/1864907_small.png",
788 |       thumbnails_pics: ["https://img.jinse.com/1864907_small.png"],
789 |       topic_type: 1,
790 |       thumbnail_type: 1,
791 |       source: "\u94fe\u95fbChainNews",
792 |       topic_url: "https://m.jinse.com/blockchain/374408.html",
793 |       attribute_exclusive: "",
794 |       attribute_depth: "",
795 |       attribute_live_broadcast: "",
796 |       attribute_spread: "",
797 |       extra_type: 0
798 |     }
799 |   }
800 | ];
801 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |  <title>React LoadMore</title>
 4 |  <meta charset="utf-8">
 5 |  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -->
 6 | </head>
 7 | <body>
 8 |  <noscript>
 9 |  You need to enable JavaScript to run this app.
10 |  </noscript>
11 |  <div id="root"></div>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { render } from "react-dom";
 3 | import ReactLoadMore from "../src/reactLoadMore";
 4 | import mockUpData from "./data";
 5 | 
 6 | class App extends React.Component {
 7 |   constructor() {
 8 |     super(...arguments);
 9 |     this.state = this._getInitialState();
10 |   }
11 |   _getInitialState() {
12 |     return {
13 |       fetching: false,
14 |       hasMore: true,
15 |       dataList: [].concat(mockUpData)
16 |     };
17 |   }
18 |   loadMore() {
19 |     const {dataList} = this.state;
20 |     if(dataList.length<100){
21 |       this.setState({fetching:true})
22 |       setTimeout(()=>{
23 |         this.setState({dataList:[...dataList,...mockUpData],fetching:false})
24 |       },2000)
25 |     }else{
26 |       this.setState({hasMore:false,fetching:false})
27 |     }
28 |   }
29 |   render() {
30 |     const { fetching, hasMore, dataList } = this.state;
31 | 
32 |     const NoResult = ()=> <span>No more Result,~~</span>;
33 |     return (
34 |       <ReactLoadMore
35 |         onBottom={this.loadMore.bind(this)}
36 |         fetching={fetching}
37 |         hasMore={hasMore}
38 |         NoResult={NoResult}
39 |         Footer={()=><div>loading ...</div>}
40 |       >
41 |         {dataList.map((item,index) => {
42 |           return (
43 |             <div style={{ height: "35vw", position: "relative" }} key={index}>
44 |               <img
45 |                 src={item.extra.thumbnail_pic}
46 |                 style={{
47 |                   width: "40vw",
48 |                   height: "25w",
49 |                   borderRadius:'3vw',
50 |                   position: "absolute",
51 |                   top: "2vw",
52 |                   left: "2vw"
53 |                 }}
54 |               />
55 |               <span style={{ fontSize: "4vw", position: "absolute",
56 |                   top: "5vw",
57 |                   fontWeight:'bold',
58 |                   left: "46vw"}}>{item.title}</span>
59 |             </div>
60 |           );
61 |         })}
62 |       </ReactLoadMore>
63 |     );
64 |   }
65 | }
66 | 
67 | render(<App />, document.getElementById("root"));
68 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-more-load",
 3 |   "version": "1.1.2",
 4 |   "description": "a load more list component base on React",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "webpack-dev-server --mode development",
 9 |     "transpile": "babel src -d dist --copy-files",
10 |     "prepublishOnly": "npm run transpile",
11 |     "compile": "NODE_ENV=production babel src --out-dir lib"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/WarrenJones/react-loadmore.git"
16 |   },
17 |   "keywords": [
18 |     "react",
19 |     "loadmore",
20 |     "infinite"
21 |   ],
22 |   "author": "warren",
23 |   "license": "ISC",
24 |   "bugs": {
25 |     "url": "https://github.com/WarrenJones/react-loadmore/issues"
26 |   },
27 |   "homepage": "https://github.com/WarrenJones/react-loadmore#readme",
28 |   "peerDependencies": {
29 |     "intersection-observer-polyfill": "^0.1.0"
30 |   },
31 |   "devDependencies": {
32 |     "babel-cli": "^6.26.0",
33 |     "babel-core": "^6.26.3",
34 |     "babel-loader": "^7.1.5",
35 |     "babel-preset-env": "^1.7.0",
36 |     "babel-preset-es2015": "^6.24.1",
37 |     "babel-preset-react": "^6.24.1",
38 |     "babel-preset-stage-2": "^6.24.1",
39 |     "classnames": "^2.2.6",
40 |     "html-webpack-plugin": "^3.2.0",
41 |     "prop-types": "^15.6.2",
42 |     "react": "^16.8.6",
43 |     "react-dom": "^16.8.6",
44 |     "svgaplayerweb": "^2.3.0",
45 |     "webpack": "^4.30.0",
46 |     "webpack-cli": "^3.3.0",
47 |     "webpack-dev-server": "^3.3.1"
48 |   },
49 |   "dependencies": {
50 |     "autoprefixer": "^9.5.1",
51 |     "css-loader": "^2.1.1",
52 |     "file-loader": "^3.0.1",
53 |     "node-sass": "^4.11.0",
54 |     "sass-loader": "^7.1.0",
55 |     "style-loader": "^0.23.1",
56 |     "intersection-observer-polyfill": "^0.1.0"
57 |   },
58 |   "browserslist": [
59 |     "last 2 version",
60 |     "> 1%"
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------
/react-loadmore-snapshot.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WarrenJones/react-loadmore/449b102bd7283b202d7ede5ab1440c9e3fa27d5b/react-loadmore-snapshot.gif


--------------------------------------------------------------------------------
/react-loadmore-snapshot.mov:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WarrenJones/react-loadmore/449b102bd7283b202d7ede5ab1440c9e3fa27d5b/react-loadmore-snapshot.mov


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactLoadMore from "./reactLoadMore";
2 | export default ReactLoadMore;


--------------------------------------------------------------------------------
/src/loading.svga:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WarrenJones/react-loadmore/449b102bd7283b202d7ede5ab1440c9e3fa27d5b/src/loading.svga


--------------------------------------------------------------------------------
/src/reactLoadMore.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import "./reactLoadMore.scss";
 4 | import classnames from "classnames";
 5 | //这是intersection的polyfill
 6 | import IntersectionObserver from "intersection-observer-polyfill";
 7 | export default class ReactLoadMore extends React.Component {
 8 |   constructor() {
 9 |     super(...arguments);
10 |     this.insideViewportCb = this.insideViewportCb.bind(this);
11 |   }
12 |   static propTypes = {
13 |     onBottom: PropTypes.func,
14 |     fetching: PropTypes.bool,
15 |     hasMore: PropTypes.bool,
16 |     NoResult: PropTypes.func,
17 |     Footer: PropTypes.func
18 |   };
19 |   componentDidMount() {
20 |     if (!this.props.Footer) this._svgaLoad();
21 |     try {
22 |       const node = document.getElementById('bottom')
23 |       this.observer = new IntersectionObserver(this.insideViewportCb);
24 |       this.observer.observe(node);
25 |     } catch (err) {
26 |       console.log("err in finding node", err);
27 |     }
28 |     window.addEventListener("scroll", this.handleOnScroll);
29 |   }
30 | 
31 |   insideViewportCb(entries) {
32 |     const { fetching, onBottom } = this.props;
33 |     entries.forEach(element => {
34 |       //在viewport里面
35 |       if (element.intersectionRatio > 0&&!fetching) {
36 |          onBottom();
37 |       }
38 |     });
39 |   }
40 | 
41 |   componentWillUnmount() {
42 |     if (this.observer) {
43 |       this.observer = null;
44 |     }
45 |   }
46 | 
47 |   _svgaLoad() {
48 |     const SVGA = require("svgaplayerweb");
49 |     const player = new SVGA.Player("#foot_loader");
50 |     var parser = new SVGA.Parser("#foot_loader"); // Must Provide same selector eg:#demoCanvas IF support IE6+
51 |     parser.load(require("./loading.svga"), function(videoItem) {
52 |       player.setVideoItem(videoItem);
53 |       player.startAnimation();
54 |     });
55 |   }
56 | 
57 |   render() {
58 |     const {
59 |       className,
60 |       children,
61 |       hasMore,
62 |       Footer,
63 |       NoResult
64 |     } = this.props;
65 |     return (
66 |       <div className={"infinite-scroll"}>
67 |         <div className={classnames(className)}>{children} </div>
68 |         <div style={{ clear: "both" }}> </div>
69 |         <div style={{ display: hasMore ? "block" : "none" }} id='bottom'>
70 |           {Footer ? (
71 |             <Footer/>
72 |           ) : (
73 |             <div className={"list-loader"}>
74 |               <div id={"foot_loader"} />
75 |             </div>
76 |           )}
77 |         </div>
78 | 
79 |         <div
80 |           className={"no-result"}
81 |           style={{ display: hasMore ? "none" : "block" }}
82 |         >
83 |           {NoResult ? <NoResult/> : "No more result"}
84 |         </div>
85 |       </div>
86 |     );
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/src/reactLoadMore.scss:
--------------------------------------------------------------------------------
 1 | @function px2vw($px, $base-font-size: 7.5px) {
 2 |   @return ($px / $base-font-size) * 1vw;
 3 | }
 4 | 
 5 | 
 6 | .infinite-scroll {
 7 |   position: relative;
 8 |   min-height: px2vw(240px);
 9 |   .no-result {
10 |     padding: px2vw(20px) 0;
11 |     
12 |     text-align: center;
13 |     color: #8fcfff;
14 |     font-size: px2vw(36px);
15 |     line-height: px2vw(42px);
16 |     font-family: ChalkboardSE;
17 |   }
18 |   .list-loader {
19 |     margin: auto;
20 |     width: px2vw(120px);
21 |     height: px2vw(120px);
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | /*** webpack.config.js ***/
 2 | const path = require("path");
 3 | const HtmlWebpackPlugin = require("html-webpack-plugin");
 4 | const htmlWebpackPlugin = new HtmlWebpackPlugin({
 5 |   template: path.join(__dirname, "example/index.html"),
 6 |   filename: "./index.html"
 7 | });
 8 | module.exports = {
 9 |   entry: path.join(__dirname, "example/index.js"),
10 |   module: {
11 |     rules: [
12 |       {
13 |         test: /\.(js|jsx)$/,
14 |         use: "babel-loader",
15 |         exclude: /node_modules/
16 |       },
17 |       {
18 |         test: /\.(scss|css)$/,
19 |         use: [
20 |           {
21 |             loader: "style-loader" // 将 JS 字符串生成为 style 节点
22 |           },
23 |           {
24 |             loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
25 |           },
26 |           {
27 |             loader: "sass-loader" // 将 Sass 编译成 CSS
28 |           }
29 |         ]
30 |       },
31 |       {
32 |         // 增加加载图片的规则
33 |         test: /\.(png|svg|jpg|gif|svga|mp3)$/,
34 |         use: [
35 |           {
36 |             loader: "file-loader",
37 |             // options: {
38 |             //   outputPath: "../img/",
39 |             //   publicPath: "/public/webpack/img/",
40 |             //   name: "[name][hash].[ext]"
41 |             // }
42 |           }
43 |         ]
44 |       },
45 |     ]
46 |   },
47 |   plugins: [htmlWebpackPlugin],
48 |   resolve: {
49 |     extensions: [".js", ".jsx"]
50 |   },
51 |   devServer: {
52 |     port: 3001
53 |   },
54 |   devtool:'#eval-source-map'
55 | };
56 | 


--------------------------------------------------------------------------------