-
67 |
- ... 68 | ... 69 |
├── .babelrc ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── build ├── build.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ ├── iphone.png │ ├── logo.png │ ├── preview.2.png │ └── view.png ├── bus.js ├── components │ └── vue-list.vue └── main.js ├── static └── .gitkeep └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Hejx 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
7 | 8 | 在线DEMO 9 | 10 |
11 | 12 | ## 序 13 | 14 | 众所周知,列表滚动加载这种需求很常见,特别是在移动webapp上。Github上各款移动端ui框架都会包含滚动加载功能的组件,但它们往往只提供很基础的功能,例如简单地监听滚动条并在满足条件的时候触发回调,然后通过某些方法把新的元素加入到页面末尾。这样的确可以解决分页加载数据的问题,但是在一个数据量比较大的情况下,页面元素会增加得很快,这时就会导致性能问题,想象一下,如果一个移动端页面上有1万条数据需要显示在页面的时候,是多么恐怖的事情。 15 | 16 | 然后,这个repo并不是要提供一个完整的滚动加载组件,而是,提供一种在数据量大的情况下,对列表的滚动加载进行优化的解决方案。 17 | 18 | ps: 我相信有不少人知道方法,但也应该有不少人还不了解。 19 | 20 | 21 | ## 思考 22 | 23 | 首先,为何要对数据量大的列表页进行滚动加载优化呢?主要的一个原因就是页面上元素太多了,滚动的时候会有卡顿的问题,移动端上更为明显。 24 | 25 | 那既然元素太多导致的问题,解决方法不就很明显了吗?没错,就是 **减少页面元素** 26 | 27 | OK,假设现在列表的元素结构是酱紫的: 28 | 29 | ```html 30 |A solution to build an infinite load more list component.
6 | 7 |Total items: {{list.length}}
17 |Item height: {{data.height}}px
18 |Above items: {{data._above}}
19 |Below items: {{data._below}}
20 |Rows in window: {{data.displayCount + 1}}-{{(data.displayCount + data._rowsInWindow) > list.length ? list.length: (data.displayCount + data._rowsInWindow)}}
21 |{{data._rowsInWindow * 4}} items from {{data.from}} to {{data.to}}
22 |Top height: {{data.lineTopHeight}}px
23 |Bottom Height: {{data.lineBottomHeight}}px
24 |Will load more items: {{!data.canLoadmore}}
25 |27 | You can open the developer tools and observe the changes in the elements. 28 |
29 |