├── .gitignore
├── README.md
├── dev
    ├── app.vue
    ├── index.html
    ├── index.js
    └── umd-example.html
├── dist
    ├── list-view-umd.js
    └── list-view.js
├── package-lock.json
├── package.json
├── packages
    └── list-view.vue
├── src
    └── list-view-umd.js
├── webpack.build-umd.config.js
├── webpack.build.config.js
└── webpack.dev.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.idea
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-better-list-view
 2 | 
 3 | vue长列表按需渲染，[DEMO](https://nossika.github.io/vue-better-list-view/dev/umd-example.html)
 4 | 
 5 | ## 使用
 6 | 
 7 | 提供npm版本和umd版本
 8 | 
 9 | npm 安装
10 | 
11 |     // install
12 |     npm i vue-better-list-view --save-dev
13 | 
14 |     // in your project
15 |     import listView from 'vue-better-list-view'
16 |     
17 | 或 umd 引入
18 | 
19 |     <script src="list-view-umd.js"></script>
20 |     <script>
21 |         Vue.use(listView);
22 |     </script>
23 | 
24 | 用法示例：
25 | 
26 |     <section style="height: 400px;">
27 |         <list-view
28 |             @scroll="listScroll"
29 |             :list="list"
30 |             :item-height-getter="itemHeightGetter"
31 |             :default-item-height="defaultItemHeight"
32 |         >
33 |             <div slot-scope="scope">
34 |                 <div>
35 |                     NO: {{ scope.item.value }}, height: {{ scope.height }}px
36 |                 </div>
37 |             </div>
38 |         </list-view>
39 |     </section>
40 | 
41 | 调试：
42 | 
43 |     npm run dev
44 |     
45 | ## API
46 | 
47 | ### 属性
48 | 
49 | #### list：array
50 | 
51 | 列表源数据
52 | 
53 | #### item-height-getter: function(item, index)
54 | 
55 | 自定义逻辑计算每一行的高度，根据item（list中的列表项）和index（在list中的索引）返回height（number类型，单位px）。
56 | 
57 | > 此函数在组件生命周期内只会对每个列表项最多求值一次，之后都从缓存取值。在提供了default-item-height的情况下，组件会按需调用此函数，即对可视窗口以外的且未缓存的列表项使用default-item-height作为预估行高。因此建议提供default-item-height来提高性能。
58 | 
59 | #### default-item-height: number
60 | 
61 | 列表每行item的默认高度值（px）。
62 | 
63 | > 没有item-height-getter的情况下此值会是所有行的行高；有item-height-getter的情况下，此值会被用于预估未缓存项的行高，详见item-height-getter说明。
64 | 
65 | ### 事件
66 | 
67 | #### scroll({ topItemIndex, bottomItemIndex, listTotalHeight, scrollTop })
68 | 
69 | 列表滚动时触发。参数：topItemIndex:number（可视列表第一项的index）；bottomItemIndex:number（可视列表最后项的index）；listTotalHeight:number（列表总高度）；scrollTop:number（滚动距离）
70 | 
71 | ### scoped-slot
72 | 
73 | #### scope: {item, index, height, offset}
74 | item（列表项）；index（列表项索引）；height（列表项高度）；offset（列表项底部距列表顶部距离）
75 | 
76 | ### 方法
77 | 
78 | #### refreshView(config = {})
79 | 
80 | 重新渲染列表。config.clearCache为true时清空item-height-getter的缓存值；config.resize为true时对可视列表DOM高度重新取值。
81 | 
82 | > clearCache一般在list发生改变的时候使用，除了push操作不需要（因为只是往数组末尾新增项的话之前缓存值是可以继续使用的）。resize一般在容器高度变化的时候使用。
83 | 
84 | > 例子：this.$refs['list-vue'].refreshView({ resize: true });
85 | 
86 | ## 提示
87 | 
88 | item-height-getter和default-item-height二者必须提供其一，使用item-height-getter的同时提供default-item-height可得到更好的性能。
89 | 
90 | ## 参考文章
91 | 
92 | [再谈前端虚拟列表的实现](https://zhuanlan.zhihu.com/p/34585166)
93 | 


--------------------------------------------------------------------------------
/dev/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <section class="container">
 3 |         <list-view
 4 |             ref="list-view"
 5 |             @scroll="listScroll"
 6 |             :list="list"
 7 |             :item-height-getter="itemHeightGetter"
 8 |             :default-item-height="defaultItemHeight"
 9 |         >
10 |             <div slot-scope="scope" class="item">
11 |                 <div :style="{color: scope.item.color}">NO: {{ scope.item.no }}, height: {{ scope.height }}px, offset: {{scope.offset}}px</div>
12 |             </div>
13 |         </list-view>
14 |     </section>
15 | </template>
16 | <script>
17 | import listView from '../packages/list-view.vue';
18 | 
19 | export default {
20 |     components: {
21 |         listView,
22 |     },
23 |     data () {
24 |         return {
25 |             list: [],
26 |             page: 0,
27 |             itemHeightGetter (item, index) {
28 |                 if (item.no % 33 === 0) {
29 |                     return 100;
30 |                 }
31 |                 return 20 + item.no % 10;
32 |             },
33 |             defaultItemHeight: 30,
34 |         }
35 |     },
36 |     methods: {
37 |         async listScroll (data) {
38 |             if (!this._getting && data.bottomItemIndex >= this.list.length - 3) {
39 |                 this._getting = true;
40 |                 this.list.push(...(await this.getData()));
41 |                 this.page++;
42 |                 this._getting = false;
43 |             }
44 |         },
45 |         getData () {
46 |             return new Promise(resolve => {
47 |                 setTimeout(() => {
48 |                     const baseIndex = this.page * 2000;
49 |                     resolve(new Array(2000).fill(0).map((i, index) => {
50 |                         return {
51 |                             no: baseIndex + index,
52 |                             color: ['#33d', '#3d3', '#d33', '#333'][Math.random() * 4 | 0],
53 |                         };
54 |                     }));
55 |                 }, 100);
56 |             })
57 |         },
58 |     },
59 |     async created () {
60 |         this.list = await this.getData();
61 |     },
62 | 
63 | }
64 | </script>
65 | <style scoped>
66 |     .container {
67 |         height: 400px;
68 |         width: 500px;
69 |         margin: 50px auto;
70 |         border: 1px solid #eee;
71 |     }
72 |     .item {
73 |         height: 100%;
74 |         display: flex;
75 |         align-items: center;
76 |     }
77 | </style>


--------------------------------------------------------------------------------
/dev/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>list-view test</title>
 6 | </head>
 7 | <body>
 8 | <section id="app">
 9 | </section>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/dev/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'Vue';
2 | import App from './app.vue';
3 | 
4 | new Vue({
5 |     el: '#app',
6 |     render: h => h(App),
7 | });
8 | 


--------------------------------------------------------------------------------
/dev/umd-example.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>list-view example</title>
 6 |     <style>
 7 |         .container {
 8 |             height: 400px;
 9 |             width: 500px;
10 |             margin: 50px auto;
11 |             border: 1px solid #eee;
12 |         }
13 |         .item {
14 |             height: 100%;
15 |             display: flex;
16 |             align-items: center;
17 |         }
18 |     </style>
19 | </head>
20 | 
21 | <body>
22 | <section id="app">
23 |     <section class="container">
24 |         <list-view
25 |             ref="list-view"
26 |             @scroll="listScroll"
27 |             :list="list"
28 |             :item-height-getter="itemHeightGetter"
29 |             :default-item-height="defaultItemHeight"
30 |         >
31 |             <div slot-scope="scope" class="item">
32 |                 <div :style="{color: scope.item.color}">
33 |                     NO: {{ scope.item.no }}, height: {{ scope.height }}px, offset: {{scope.offset}}px
34 |                 </div>
35 |             </div>
36 |         </list-view>
37 |     </section>
38 | </section>
39 | <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16"></script>
40 | <script src="../dist/list-view-umd.js"></script>
41 | <script>
42 |     new Vue({
43 |         el: '#app',
44 |         data () {
45 |             return {
46 |                 list: [],
47 |                 page: 0,
48 |                 itemHeightGetter (item, index) {
49 |                     if (item.no % 33 === 0) {
50 |                         return 100;
51 |                     }
52 |                     return 20 + item.no % 10;
53 |                 },
54 |                 defaultItemHeight: 30,
55 |             }
56 |         },
57 |         methods: {
58 |             listScroll (data) {
59 |                 if (!this._getting && data.bottomItemIndex >= this.list.length - 3) {
60 |                     this._getting = true;
61 |                     this.getData().then(d => {
62 |                         this.list.push(...d);
63 |                         this.page++;
64 |                         this._getting = false;
65 |                     });
66 |                 }
67 |             },
68 |             getData () {
69 |                 return new Promise(resolve => {
70 |                     setTimeout(() => {
71 |                         const baseIndex = this.page * 2000;
72 |                         resolve(new Array(2000).fill(0).map((i, index) => {
73 |                             return {
74 |                                 no: baseIndex + index,
75 |                                 color: ['#33d', '#3d3', '#d33', '#333'][Math.random() * 4 | 0],
76 |                             };
77 |                         }));
78 |                     }, 100);
79 |                 })
80 |             },
81 |         },
82 |         created () {
83 |             this.getData().then(d => {
84 |                 this.list = d;
85 |             });
86 |         },
87 |     });
88 | </script>
89 | </body>
90 | </html>


--------------------------------------------------------------------------------
/dist/list-view-umd.js:
--------------------------------------------------------------------------------
1 | !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var i=e();for(var s in i)("object"==typeof exports?exports:t)[s]=i[s]}}(window,function(){return function(t){var e={};function i(s){if(e[s])return e[s].exports;var n=e[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:s})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=1)}([function(t,e,i){"use strict";i.r(e);var s={props:{list:Array,itemHeightGetter:Function,defaultItemHeight:Number},data:()=>({listView:[],listTotalHeight:0,itemOffsetCache:[],topItemIndex:0}),computed:{listViewWithInfo(){return this.listView.map((t,e)=>{const i=this.topItemIndex+e,{height:s,offset:n}=this.getItemInfo(i);return{index:i,item:t,height:s,offset:n}})}},watch:{list(){this.refreshView()}},methods:{refreshView(t){t&&(t.resize&&(this._viewHeight=this.$refs.wrapper.clientHeight),t.clearCache&&(this.itemOffsetCache=[]));const e=this.$refs.wrapper.scrollTop,i=this._viewHeight,s=this.findItemIndexByOffset(e),n=this.findItemIndexByOffset(e+i);this.topItemIndex=s,this.listView=this.list.slice(s,n+1);const o=this.defaultItemHeight?this.getItemInfo(this.itemOffsetCache.length-1).offset+(this.list.length-this.itemOffsetCache.length)*this.defaultItemHeight:this.getItemInfo(this.list.length-1).offset;this.listTotalHeight=o,this.$refs["item-wrapper"].style.transform=`translateY(${this.getItemInfo(s-1).offset}px)`,this.$emit("scroll",{topItemIndex:s,bottomItemIndex:n,listTotalHeight:o,scrollTop:e})},findItemIndexByOffset(t){if(t>=this.getItemInfo(this.itemOffsetCache.length-1).offset){for(let e=this.itemOffsetCache.length;e<this.list.length;e++)if(this.getItemInfo(e).offset>t)return e;return this.list.length-1}{let e=0,i=this.itemOffsetCache.length-1;for(;e<i;){let s=(e+i)/2|0,n=this.getItemInfo(s).offset;if(n===t)return s;n>t?i=s-1:e=s+1}return this.getItemInfo(e).offset<t&&this.getItemInfo(e+1).offset>t&&(e+=1),e}},getItemInfo(t){if(t<0||t>this.list.length-1)return{offset:0,height:0};let e=this.itemOffsetCache[t];if(!e){let i=this.itemHeightGetter?this.itemHeightGetter(this.list[t],t):this.defaultItemHeight;e=this.itemOffsetCache[t]={height:i,offset:this.getItemInfo(t-1).offset+i}}return e}},mounted(){this.refreshView({resize:!0})}},n=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"wrapper",staticStyle:{width:"100%",height:"100%",overflow:"auto",position:"relative",margin:"0",padding:"0",border:"none"},on:{scroll:function(e){t.refreshView()}}},[i("div",{staticStyle:{width:"100%",padding:"0",margin:"0"},style:{height:t.listTotalHeight+"px"}}),t._v(" "),i("div",{ref:"item-wrapper",staticStyle:{position:"absolute",top:"0",left:"0",width:"100%",padding:"0",margin:"0"}},t._l(t.listViewWithInfo,function(e,s){return i("div",{key:e.index,style:{height:e.height+"px"}},[t._t("default",null,{item:e.item,height:e.height,offset:e.offset,index:e.index})],2)}))])};n._withStripped=!0;var o=function(t,e,i,s,n,o,r,f){var h=typeof(t=t||{}).default;"object"!==h&&"function"!==h||(t=t.default);var l,a="function"==typeof t?t.options:t;if(e&&(a.render=e,a.staticRenderFns=i,a._compiled=!0),s&&(a.functional=!0),o&&(a._scopeId=o),r?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},a._ssrRegister=l):n&&(l=f?function(){n.call(this,this.$root.$options.shadowRoot)}:n),l)if(a.functional){a._injectStyles=l;var u=a.render;a.render=function(t,e){return l.call(e),u(t,e)}}else{var d=a.beforeCreate;a.beforeCreate=d?[].concat(d,l):[l]}return{exports:t,options:a}}(s,n,[],!1,null,null,null);o.options.__file="packages\\list-view.vue";e.default=o.exports},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.listView=void 0;var s,n=i(0),o=(s=n)&&s.__esModule?s:{default:s};var r={install:function(t){t.component("list-view",o.default)}};window&&window.Vue&&window.Vue.use(r),e.listView=r}])});


--------------------------------------------------------------------------------
/dist/list-view.js:
--------------------------------------------------------------------------------
1 | !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var i=e();for(var s in i)("object"==typeof exports?exports:t)[s]=i[s]}}(window,function(){return function(t){var e={};function i(s){if(e[s])return e[s].exports;var n=e[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:s})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";i.r(e);var s={props:{list:Array,itemHeightGetter:Function,defaultItemHeight:Number},data:()=>({listView:[],listTotalHeight:0,itemOffsetCache:[],topItemIndex:0}),computed:{listViewWithInfo(){return this.listView.map((t,e)=>{const i=this.topItemIndex+e,{height:s,offset:n}=this.getItemInfo(i);return{index:i,item:t,height:s,offset:n}})}},watch:{list(){this.refreshView()}},methods:{refreshView(t){t&&(t.resize&&(this._viewHeight=this.$refs.wrapper.clientHeight),t.clearCache&&(this.itemOffsetCache=[]));const e=this.$refs.wrapper.scrollTop,i=this._viewHeight,s=this.findItemIndexByOffset(e),n=this.findItemIndexByOffset(e+i);this.topItemIndex=s,this.listView=this.list.slice(s,n+1);const o=this.defaultItemHeight?this.getItemInfo(this.itemOffsetCache.length-1).offset+(this.list.length-this.itemOffsetCache.length)*this.defaultItemHeight:this.getItemInfo(this.list.length-1).offset;this.listTotalHeight=o,this.$refs["item-wrapper"].style.transform=`translateY(${this.getItemInfo(s-1).offset}px)`,this.$emit("scroll",{topItemIndex:s,bottomItemIndex:n,listTotalHeight:o,scrollTop:e})},findItemIndexByOffset(t){if(t>=this.getItemInfo(this.itemOffsetCache.length-1).offset){for(let e=this.itemOffsetCache.length;e<this.list.length;e++)if(this.getItemInfo(e).offset>t)return e;return this.list.length-1}{let e=0,i=this.itemOffsetCache.length-1;for(;e<i;){let s=(e+i)/2|0,n=this.getItemInfo(s).offset;if(n===t)return s;n>t?i=s-1:e=s+1}return this.getItemInfo(e).offset<t&&this.getItemInfo(e+1).offset>t&&(e+=1),e}},getItemInfo(t){if(t<0||t>this.list.length-1)return{offset:0,height:0};let e=this.itemOffsetCache[t];if(!e){let i=this.itemHeightGetter?this.itemHeightGetter(this.list[t],t):this.defaultItemHeight;e=this.itemOffsetCache[t]={height:i,offset:this.getItemInfo(t-1).offset+i}}return e}},mounted(){this.refreshView({resize:!0})}},n=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"wrapper",staticStyle:{width:"100%",height:"100%",overflow:"auto",position:"relative",margin:"0",padding:"0",border:"none"},on:{scroll:function(e){t.refreshView()}}},[i("div",{staticStyle:{width:"100%",padding:"0",margin:"0"},style:{height:t.listTotalHeight+"px"}}),t._v(" "),i("div",{ref:"item-wrapper",staticStyle:{position:"absolute",top:"0",left:"0",width:"100%",padding:"0",margin:"0"}},t._l(t.listViewWithInfo,function(e,s){return i("div",{key:e.index,style:{height:e.height+"px"}},[t._t("default",null,{item:e.item,height:e.height,offset:e.offset,index:e.index})],2)}))])};n._withStripped=!0;var o=function(t,e,i,s,n,o,r,f){var h=typeof(t=t||{}).default;"object"!==h&&"function"!==h||(t=t.default);var l,a="function"==typeof t?t.options:t;if(e&&(a.render=e,a.staticRenderFns=i,a._compiled=!0),s&&(a.functional=!0),o&&(a._scopeId=o),r?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},a._ssrRegister=l):n&&(l=f?function(){n.call(this,this.$root.$options.shadowRoot)}:n),l)if(a.functional){a._injectStyles=l;var c=a.render;a.render=function(t,e){return l.call(e),c(t,e)}}else{var d=a.beforeCreate;a.beforeCreate=d?[].concat(d,l):[l]}return{exports:t,options:a}}(s,n,[],!1,null,null,null);o.options.__file="packages\\list-view.vue";e.default=o.exports}])});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-better-list-view",
 3 |   "version": "0.1.1",
 4 |   "description": "",
 5 |   "main": "dist/list-view.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --config webpack.dev.config.js",
 8 |     "build": "webpack --progress --config webpack.build.config.js",
 9 |     "build:umd": "webpack --progress --config webpack.build-umd.config.js"
10 |   },
11 |   "author": "nossika",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "vue": "^2.5.16"
15 |   },
16 |   "devDependencies": {
17 |     "babel-core": "^6.26.0",
18 |     "babel-loader": "^7.1.4",
19 |     "babel-plugin-transform-runtime": "^6.23.0",
20 |     "babel-preset-env": "^1.6.1",
21 |     "clean-webpack-plugin": "^0.1.19",
22 |     "css-loader": "^0.28.11",
23 |     "html-webpack-plugin": "^3.2.0",
24 |     "vue-loader": "^14.2.2",
25 |     "vue-template-compiler": "^2.5.16",
26 |     "webpack": "^4.6.0",
27 |     "webpack-cli": "^2.0.15",
28 |     "webpack-dev-server": "^3.1.3"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/packages/list-view.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div ref="wrapper" @scroll="refreshView()" style="width: 100%; height: 100%; overflow: auto; position: relative; margin: 0; padding: 0; border: none;">
  3 |         <div
  4 |             :style="{height: listTotalHeight + 'px'}"
  5 |             style="width: 100%; padding: 0; margin: 0;"
  6 |         ></div>
  7 |         <div
  8 |             ref="item-wrapper"
  9 |             style="position: absolute; top: 0; left: 0; width: 100%; padding: 0; margin: 0;"
 10 |         >
 11 |             <div
 12 |                 v-for="(d, index) in listViewWithInfo"
 13 |                 :key="d.index"
 14 |                 :style="{height: d.height + 'px'}"
 15 |             >
 16 |                 <slot :item="d.item" :height="d.height" :offset="d.offset" :index="d.index"></slot>
 17 |             </div>
 18 |         </div>
 19 |     </div>
 20 | </template>
 21 | <script>
 22 | export default {
 23 |     props: {
 24 |         list: Array, // 列表数据
 25 |         itemHeightGetter: Function, // 获取列表高度的函数
 26 |         defaultItemHeight: Number, // 默认item高度
 27 |     },
 28 |     data () {
 29 |         return {
 30 |             listView: [], // 可视列表数据
 31 |             listTotalHeight: 0, // 列表总高度
 32 |             itemOffsetCache: [], // item信息缓存
 33 |             topItemIndex: 0, // 可视窗口的第一项
 34 |         };
 35 |     },
 36 |     computed: {
 37 |         listViewWithInfo () { // 封装listView，提供index、height、offset数据
 38 |             return this.listView.map((item, viewIndex) => {
 39 |                 const index = this.topItemIndex + viewIndex;
 40 |                 const { height, offset } = this.getItemInfo(index);
 41 |                 return {
 42 |                     index,
 43 |                     item,
 44 |                     height,
 45 |                     offset,
 46 |                 }
 47 |             });
 48 |         }
 49 |     },
 50 |     watch: {
 51 |         list () {
 52 |             this.refreshView();
 53 |         },
 54 |     },
 55 |     methods: {
 56 |         // 重渲染可视列表（可供组件外部调用）
 57 |         refreshView (config) {
 58 |             if (config) {
 59 |                 if (config.resize) { // 只有resize为true时对wrapper高度重新取值，减少DOM取值操作
 60 |                     this._viewHeight = this.$refs.wrapper.clientHeight;
 61 |                 }
 62 |                 if (config.clearCache) { // 清空缓存
 63 |                     this.itemOffsetCache = [];
 64 |                 }
 65 |             }
 66 |             const scrollTop = this.$refs.wrapper.scrollTop; // 当前scrollTop
 67 |             const viewHeight = this._viewHeight; // 可视窗口高度
 68 |             const topItemIndex = this.findItemIndexByOffset(scrollTop); // 可视窗口的第一项
 69 |             const bottomItemIndex = this.findItemIndexByOffset(scrollTop + viewHeight); // 可视窗口的最后项
 70 |             this.topItemIndex = topItemIndex;
 71 |             this.listView = this.list.slice(topItemIndex, bottomItemIndex + 1); // 可视列表
 72 | 
 73 |             // 列表总高度
 74 |             // 若提供了默认item高度（defaultItemHeight），则高度 = 已计算item的高度总合 + 未计算item数 * 默认item高度；否则全部使用计算高度
 75 |             // 这里已计算过的item会缓存，所有item只会计算一次
 76 |             const listTotalHeight = this.defaultItemHeight
 77 |                 ? this.getItemInfo(this.itemOffsetCache.length - 1).offset + (this.list.length - this.itemOffsetCache.length) * this.defaultItemHeight
 78 |                 : this.getItemInfo(this.list.length - 1).offset;
 79 | 
 80 |             this.listTotalHeight = listTotalHeight;
 81 | 
 82 |             this.$refs['item-wrapper'].style.transform = `translateY(${this.getItemInfo(topItemIndex - 1).offset}px)`; // 控制translateY使可视列表位置保持在可视窗口
 83 | 
 84 |             // 对外抛出scroll事件
 85 |             this.$emit('scroll', {
 86 |                 topItemIndex,
 87 |                 bottomItemIndex,
 88 |                 listTotalHeight,
 89 |                 scrollTop
 90 |             });
 91 |         },
 92 |         // 根据offset获取item的在列表中的index
 93 |         findItemIndexByOffset (offset) {
 94 |             // 如果offset大于缓存数组的最后项，按序依次往后查找（调用getItemInfo的过程也会缓存数组）
 95 |             if (offset >= this.getItemInfo(this.itemOffsetCache.length - 1).offset) {
 96 |                 for (let index = this.itemOffsetCache.length; index < this.list.length; index++) {
 97 |                     if (this.getItemInfo(index).offset > offset) {
 98 |                         return index;
 99 |                     }
100 |                 }
101 |                 return this.list.length - 1;
102 |             } else { // 如果offset小于缓存数组的最后项，那么在缓存数组中二分法查找
103 |                 let begin = 0;
104 |                 let end = this.itemOffsetCache.length - 1;
105 |                 while (begin < end) {
106 |                     let mid = (begin + end) / 2 | 0;
107 |                     let midOffset = this.getItemInfo(mid).offset;
108 |                     if (midOffset === offset) {
109 |                         return mid;
110 |                     } else if (midOffset > offset) {
111 |                         end = mid - 1;
112 |                     } else {
113 |                         begin = mid + 1;
114 |                     }
115 |                 }
116 |                 if (this.getItemInfo(begin).offset < offset && this.getItemInfo(begin + 1).offset > offset) {
117 |                     begin = begin + 1;
118 |                 }
119 |                 return begin;
120 |             }
121 |         },
122 |         // 获取item信息（有缓存则取缓存，无缓存则计算并缓存）
123 |         getItemInfo (index) {
124 |             // 超出取值范围，返回默认值
125 |             if (index < 0 || index > this.list.length - 1) {
126 |                 return {
127 |                     offset: 0,
128 |                     height: 0,
129 |                 };
130 |             }
131 |             let cache = this.itemOffsetCache[index];
132 |             // 如果没有缓存，进行计算并缓存结果
133 |             if (!cache) {
134 |                 // 优先用itemHeightGetter计算高度，无itemHeightGetter则取defaultItemHeight作为高度
135 |                 let height = (this.itemHeightGetter ? this.itemHeightGetter(this.list[index], index) : this.defaultItemHeight);
136 |                 cache = this.itemOffsetCache[index] = {
137 |                     height, // item高度
138 |                     offset: this.getItemInfo(index - 1).offset + height, // 递归得出item的bottom距离列表顶部的距离，item的offset = 上个item的offset + 自己的height
139 |                 };
140 |             }
141 |             // 如果已有缓存，直接返回缓存的结果
142 |             return cache;
143 |         },
144 |     },
145 |     mounted () {
146 |         this.refreshView({ resize: true });
147 |     },
148 | }
149 | </script>
150 | 
151 | 


--------------------------------------------------------------------------------
/src/list-view-umd.js:
--------------------------------------------------------------------------------
 1 | import listViewComp from '../packages/list-view.vue';
 2 | 
 3 | const listView = {
 4 |     install (Vue) {
 5 |         Vue.component('list-view', listViewComp);
 6 |     },
 7 | };
 8 | 
 9 | 
10 | if (window && window.Vue) {
11 |     window.Vue.use(listView);
12 | }
13 | 
14 | export { listView }
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/webpack.build-umd.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |     entry: {
 6 |         'list-view-umd': path.resolve(__dirname, 'src/list-view-umd'),
 7 |     },
 8 |     output: {
 9 |         filename: '[name].js',
10 |         path: path.resolve(__dirname, 'dist'),
11 |         libraryTarget: 'umd',
12 |     },
13 |     mode: 'production',
14 |     module: {
15 |         rules: [
16 |             {
17 |                 test: /\.js$/,
18 |                 use: [
19 |                     {
20 |                         loader: 'babel-loader',
21 |                         query: {
22 |                             presets: ['env'],
23 |                         },
24 |                     },
25 |                 ],
26 |                 exclude: /node_modules/,
27 |             },
28 |             {
29 |                 test: /\.vue$/,
30 |                 loader: 'vue-loader',
31 |             }
32 |         ],
33 |     },
34 |     plugins: [
35 | 
36 |     ],
37 | };


--------------------------------------------------------------------------------
/webpack.build.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |     entry: {
 6 |         'list-view': path.resolve(__dirname, 'packages/list-view.vue'),
 7 |     },
 8 |     output: {
 9 |         filename: '[name].js',
10 |         path: path.resolve(__dirname, 'dist'),
11 |         libraryTarget: 'umd',
12 |     },
13 |     mode: 'production',
14 |     module: {
15 |         rules: [
16 |             {
17 |                 test: /\.js$/,
18 |                 use: [
19 |                     {
20 |                         loader: 'babel-loader',
21 |                         query: {
22 |                             presets: ['env'],
23 |                         },
24 |                     },
25 |                 ],
26 |                 exclude: /node_modules/,
27 |             },
28 |             {
29 |                 test: /\.vue$/,
30 |                 loader: 'vue-loader',
31 |             }
32 |         ],
33 |     },
34 |     plugins: [
35 | 
36 |     ],
37 | };


--------------------------------------------------------------------------------
/webpack.dev.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const webpack = require('webpack');
 4 | 
 5 | module.exports = {
 6 |     entry: {
 7 |         'test': path.resolve(__dirname, 'dev/index'),
 8 |     },
 9 |     output: {
10 |         filename: '[name].js',
11 |         path: path.resolve(__dirname, 'dist'),
12 |     },
13 |     mode: 'development',
14 |     devtool: '#source-map',
15 |     module: {
16 |         rules: [
17 |             {
18 |                 test: /\.js$/,
19 |                 use: [
20 |                     {
21 |                         loader: 'babel-loader',
22 |                         query: {
23 |                             presets: ['env'],
24 |                         },
25 |                     },
26 |                 ],
27 |                 exclude: /node_modules/,
28 |             },
29 |             {
30 |                 test: /\.vue$/,
31 |                 loader: 'vue-loader',
32 |             }
33 |         ],
34 |     },
35 |     devServer: {
36 |         hot: true,
37 |         inline: true,
38 |         open: true,
39 |         openPage: '',
40 |     },
41 |     plugins: [
42 |         new webpack.HotModuleReplacementPlugin(),
43 |         new HtmlWebpackPlugin({
44 |             template: path.resolve(__dirname, 'dev/index.html'),
45 |             inject: 'body',
46 |         }),
47 |     ],
48 | };


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