├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── VirtualListScroll
        └── index.vue
    ├── index.js
    └── main.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [Demo](https://virtual-list-scroll-xfy196.vercel.app/)
 2 | ### Install
 3 | 
 4 | ```shell
 5 | npm i virtual-list-scroll
 6 | ```
 7 | 
 8 | ### Import
 9 | 
10 | ```shell
11 | import Vue from "vue"
12 | import VirtualListScroll from "virtual-list-scroll"
13 | Vue.use(VirtualListScroll)
14 | ```
15 | 
16 | ### Usage
17 | 
18 | ### Page Mode
19 | 
20 | ```vue
21 | <VirtualListScroll :data="blocks">
22 |     <template slot-scope="{data}"></template>
23 | </VirtualListScroll>
24 | ```
25 | 
26 | ### Container Mode
27 | 
28 | ```vue
29 | <VirtualListScroll :height="300" :pageMode="false" :data="blocks">
30 |     <template slot-scope="{data}">
31 |     </template>
32 | </VirtualListScroll>
33 | ```
34 | 
35 | ### Flxed Block Height
36 | 
37 | ```vue
38 | <VirtualListScroll
39 |   :height="300"
40 |   :pageMode="false"
41 |   :flxedBlockHeight="50"
42 |   :data="blocks"
43 | >
44 |     <template slot-scope="{data}">
45 |     </template>
46 | </VirtualListScroll>
47 | ```
48 | 
49 | ### Unique virtual block
50 | 
51 | ```vue
52 | <VirtualListScroll :height="300" :pageMode="false" :data="blocks">
53 |     <template slot-scope="{data}">
54 |     <template v-if="data.id===0"></template>
55 |     <template v-if="data.id===1"></template>
56 |     </template>
57 | </VirtualListScroll>
58 | ```
59 | ### Props
60 | | Name             | Type          | Default | Description  |
61 | |------------------|---------------|---------|--------------|
62 | | data             | Array<DataObject> | -       | 必填项,列表中数组数据      |
63 | | height           | Number        | -       | 虚拟滚动区域的高度    |
64 | | flxedBlockHeight | Number        | -       | 每一个列表Item的高度 |
65 | | pageMode         | Boolean       | true    | 假定滚动条是在window上还是在指定的虚拟滚动盒子上 |
66 | 
67 | ### DataObjet
68 | | Name   | Type          | Default | Description                         |
69 | |--------|---------------|---------|-------------------------------------|
70 | | id     | String/Number | -       | 必填项，虚拟列表渲染的唯一key                    |
71 | | height | Number        | -       | 只有当`flxedBlockHeight`没有设定的时候才会使用这个值 |
72 | ### License
73 | MIT


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "virtual-list-scroll",
 3 |   "version": "1.1.0",
 4 |   "main": "src/index.js",
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "license": "MIT",
11 |   "author": "小小荧",
12 |   "description": "一个可以让大量列表渲染无压力的虚拟滚动列表",
13 |   "dependencies": {
14 |     "core-js": "^3.6.5",
15 |     "vue": "^2.7.16"
16 |   },
17 |   "homepage": "https://virtual-list-scroll.vercel.app/",
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "https://github.com/xfy196/virtual-list-scroll"
21 |   },
22 |   "keywords": ["virtual", "list", "scroll"],
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "~4.5.0",
25 |     "@vue/cli-plugin-eslint": "~4.5.0",
26 |     "@vue/cli-service": "~4.5.0",
27 |     "babel-eslint": "^10.1.0",
28 |     "eslint": "^6.7.2",
29 |     "eslint-plugin-vue": "^6.2.2",
30 |     "vue-template-compiler": "^2.7.16"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xfy196/virtual-list-scroll/02ba5986e7e1c3e1903029c70411287ad55f85de/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <a href="https://github.com/xfy196/virtual-list-scroll" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="header">Virtual List Scroll</div>
  4 |         <div class="userOptions">
  5 |             <span class="option">
  6 |                 <span>
  7 |                     Data Amount
  8 |                 </span>
  9 |                 <select v-model="dataAmt">
 10 |                     <option value="100">100</option>
 11 |                     <option value="1000">1000</option>
 12 |                     <option value="10000">10000</option>
 13 |                     <option value="200000">200000</option>
 14 |                     <option value="500000">500000</option>
 15 |                 </select>
 16 |             </span>
 17 |             <span class="option">
 18 |                 <span>
 19 |                     Page Mode
 20 |                 </span>
 21 |                 <input type="checkbox" v-model="isPageMode">
 22 |             </span>
 23 |             <span class="option">
 24 |                 <span>
 25 |                     Fixed Block Height
 26 |                 </span>
 27 |                 <input type="checkbox" v-model="isFixedHeight">
 28 |             </span>
 29 |         </div>
 30 |         <VirtualListScroll :fixedBlockHeight="isFixedHeight ? 50 : undefined" v-if="true" :pageMode="isPageMode" :height="500" :data="data" ref="vb">
 31 |             <template slot-scope="{data}">
 32 |                 <div :style="{height: '100%', 'background-color': data.color}">
 33 |                     {{data.id}}
 34 |                 </div>
 35 |             </template>
 36 |         </VirtualListScroll>
 37 |     </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import Vue from "vue";
 42 | import VirtualListScroll from "./index";
 43 | Vue.use(VirtualListScroll)
 44 | export default {
 45 |     name: "App",
 46 |     data() {
 47 |         return {
 48 |             data: [],
 49 |             dataAmt: '1000',
 50 |             isPageMode: false,
 51 |             isFixedHeight: true
 52 |         }
 53 |     },
 54 |     created() {
 55 |         this.data = this.dataConstructor(this.dataAmt, this.isFixedHeight);
 56 |     },
 57 |     watch: {
 58 |         dataAmt: function() {
 59 |             this.data = this.dataConstructor(this.dataAmt, this.isFixedHeight);
 60 |             this.$forceUpdate();
 61 |         },
 62 |         isPageMode: function() {
 63 |             this.$forceUpdate();
 64 |         },
 65 |         isFixedHeight: function() {
 66 |             this.data = this.dataConstructor(this.dataAmt, this.isFixedHeight);
 67 |             this.$forceUpdate();
 68 |         }
 69 |     },
 70 |     computed: {
 71 |     },
 72 |     methods: {
 73 |         dataConstructor(amount, fixedHeight) {
 74 |             let constructedArr = [];
 75 |             for (let i = 0 ; i < Number(amount) ; i++) {
 76 |                 let constructedObj = {};
 77 |                 constructedObj['height'] = fixedHeight ? 50 : this.randomInteger(30, 90);
 78 |                 constructedObj['id'] = i;
 79 |                 constructedObj['color'] = '#' + this.randomColor();
 80 |                 constructedArr.push(constructedObj);
 81 |             }
 82 |             return constructedArr;
 83 |         },
 84 |         randomColor() {
 85 |             return Math.floor(Math.random() * 16777215).toString(16);
 86 |         },
 87 |         randomInteger(min, max) {
 88 |             return Math.floor(Math.random() * (max - min + 1) ) + min;
 89 |         }
 90 |     }
 91 | }
 92 | </script>
 93 | 
 94 | <style scoped>
 95 | span, div{
 96 |     font-family: 'Helvetica Neue', sans-serif;
 97 | }
 98 | 
 99 | .header {
100 |     font-family: 'Helvetica Neue', sans-serif;
101 |     font-size: 25px;
102 |     text-align: center;
103 | }
104 | 
105 | .userOptions {
106 |     margin: 10px 0;
107 | }
108 | 
109 | .option {
110 |     margin: 0 7px;
111 | }
112 | 
113 | .footer {
114 |     font-size: 10px;
115 |     text-align: center;
116 | }
117 | 
118 | .btn {
119 |     cursor: pointer;
120 | }
121 | </style>


--------------------------------------------------------------------------------
/src/VirtualListScroll/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-on="pageMode ? {} : {scroll: handleScroll}" :style="containerStyle" ref="vb">
  3 |     <div :style="{height: `${offsetTop}px`}"></div>
  4 |     <div
  5 |       :style="{height: `${flxedBlockHeight? flxedBlockHeight: item.height}px`}"
  6 |       v-for="item in renderList"
  7 |       :key="item.id"
  8 |     >
  9 |       <slot :data="item"></slot>
 10 |     </div>
 11 |     <div :style="{height: `${offsetBot}px`}"></div>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 |   props: {
 18 |     // 具体的列表的数组
 19 |     data: {
 20 |       type: Array,
 21 |       required: true
 22 |     },
 23 |     // 虚拟块的高度
 24 |     height: {
 25 |       type: Number
 26 |     },
 27 |     // 虚拟滚动去每一个item的高度
 28 |     flxedBlockHeight: {
 29 |       type: Number
 30 |     },
 31 |     // 假定是window有滚动条还是虚拟滚动区有滚动条
 32 |     pageMode: {
 33 |       type: Boolean,
 34 |       required: true
 35 |     }
 36 |   },
 37 |   data() {
 38 |     return {
 39 |       renderList: [],
 40 |       viewportEnd: this.height,
 41 |       viewportBegin: 0,
 42 |       offsetTop: 0,
 43 |       offsetBot: 0,
 44 |       transformedData: []
 45 |     };
 46 |   },
 47 |   watch: {
 48 |     data: {
 49 |       handler: function(newValue, oldValue) {
 50 |         this.computeTransformedData(newValue)
 51 |         // 如果存在旧值
 52 |         if (oldValue) {
 53 |           this.$nextTick(() => {
 54 |             this.$refs.vb.scrollTop = 0;
 55 |             this.handleScroll();
 56 |           });
 57 |         }
 58 |       },
 59 |       immediate: true
 60 |     },
 61 |     pageMode(newValue) {
 62 |       if (newValue) {
 63 |         window.addEventListener("scroll", this.handleScroll);
 64 |       } else {
 65 |         // 如果不存在新的之变化直接清楚这个scorll的滚动监听
 66 |         window.removeEventListener("scroll", this.handleScroll);
 67 |       }
 68 |       // 值发生变化直接需要重新计算
 69 |       this.computeTransformedData(this.data);
 70 |       this.$nextTick(() => {
 71 |         this.$refs.vb.scrollTop = 0;
 72 |         this.handleScroll();
 73 |       });
 74 |     },
 75 |     flxedBlockHeight() {
 76 |       //重新调用滚动事件的方法
 77 |       this.handleScroll();
 78 |     }
 79 |   },
 80 |   created() {
 81 |     // 判断页面的模式
 82 |     if (this.pageMode) {
 83 |       window.addEventListener("scroll", this.handleScroll);
 84 |     }
 85 |   },
 86 |   mounted() {
 87 |     if (this.pageMode) {
 88 |       this.computeTransformedData(this.data);
 89 |     }
 90 |     this.updateVb(0);
 91 |   },
 92 |   destroyed() {
 93 |     // 组价销毁时清除之前的事件
 94 |     if (this.pageMode) {
 95 |       window.removeEventListener("scroll", this.handleScroll);
 96 |     }
 97 |   },
 98 |   methods: {
 99 |     computeTransformedData(oldArr) {
100 |       if (
101 |         (!this.flxedBlockHeight && this.pageMode && this.$refs.vb) ||
102 |         !this.pageMode
103 |       ) {
104 |         let curHeight = this.pageMode ? this.$refs.vb.offsetTop : 0;
105 |         // 每一次的虚拟列表的第一个的scrolTop
106 |         let rt = [curHeight];
107 |         oldArr.forEach(item => {
108 |           curHeight += item.height;
109 |           // 每一次计算后端的scrollTop
110 |           rt.push(curHeight);
111 |         });
112 |         this.transformedData = rt;
113 |       }
114 |     },
115 |     /**
116 |   	滚动检测方法
117 |   	*/
118 |     handleScroll() {
119 |       // 计算高度
120 |       const scrollTop = this.pageMode
121 |         ? window.pageYOffset
122 |         : this.$refs.vb.scrollTop;
123 |       // 为了必要滚动过快需要使用动画帧
124 |       window.requestAnimationFrame(() => {
125 |         // 更新虚拟滚动区内的内容
126 |         this.updateVb(scrollTop);
127 |       });
128 |     },
129 |     /**
130 |      * 存在指定的盒子高度寻找开始的下表
131 |      */
132 |     findBlockHeightLowerBound(viewportBegin, flxedBlockHeight) {
133 |       const sAdjusted = this.pageMode
134 |         ? viewportBegin - this.$refs.vb.scrollTop
135 |         : viewportBegin;
136 |       const computedStartIndex = ~~(sAdjusted / flxedBlockHeight);
137 |       return computedStartIndex >= 0 ? computedStartIndex : 0;
138 |     },
139 |     /**
140 |      * 不存在盒子指定的高度二分法寻找开始的下表
141 |      */
142 |     binarySearchLowerBound(viewportBegin, transformedData) {
143 |       let lo = 0;
144 |       // 最后一个高度的前一个其实就代表最后一个的头部位置
145 |       let hi = transformedData.length - 1;
146 |       let mid;
147 |       while (lo <= hi) {
148 |         // 向下取整
149 |         mid = ~~((lo + hi) / 2);
150 |         // 判断这个中间位置的高度是否大于当前开始的高度
151 |         if (transformedData[mid] > viewportBegin) {
152 |           // 如果中间值为0说明就是开始位置
153 |           if (mid === 0) {
154 |             return 0;
155 |           } else {
156 |             hi = mid - 1;
157 |           }
158 |         } else if (transformedData[mid] < viewportBegin) {
159 |           // 如果当前中间的高度 小于 当前开始的高度
160 |           if (mid + 1 < transformedData.length) {
161 |             if (transformedData[mid + 1] > viewportBegin) {
162 |               return mid;
163 |             } else {
164 |               lo = mid + 1;
165 |             }
166 |           } else {
167 |             return -1;
168 |           }
169 |         } else {
170 |           return mid;
171 |         }
172 |       }
173 |     },
174 |     findBlockHeightUpperBound(viewportEnd, flxedBlockHeight) {
175 |       const eAdjusted = this.pageMode
176 |         ? viewportEnd - this.$refs.vb.scrollTop
177 |         : viewportEnd;
178 |       // 末尾的开始下标
179 |       const computedStartIndex = ~~(eAdjusted / flxedBlockHeight);
180 |       // 判断一下大于0就是正常返回否则就是返回0
181 |       return computedStartIndex <= this.data.length
182 |         ? computedStartIndex
183 |         : this.data.length;
184 |     },
185 |     /**
186 |      * 找到后面的的开始下标，但是不能有固定的高度
187 |      */
188 |     binarySearchUpperBound(viewportEnd, transformedData) {
189 |       let lo = 0;
190 |       let hi = transformedData.length - 1;
191 |       let mid;
192 |       // 二分法查找，找到末尾的下标
193 |       while (lo <= hi) {
194 |         mid = ~~((lo + hi) / 2);
195 |         if (transformedData[mid] > viewportEnd) {
196 |           if (mid > 0) {
197 |             if (transformedData[mid - 1] < viewportEnd) {
198 |               return mid;
199 |             } else {
200 |               hi = mid - 1;
201 |             }
202 |           } else {
203 |             return -1;
204 |           }
205 |         } else if (transformedData[mid] < viewportEnd) {
206 |           // 如果中间下标等于数组的长度减一
207 |           if (mid === transformedData.length - 1) {
208 |             return mid;
209 |           } else {
210 |             // 如果不等于数组长度那么我们需要加1
211 |             lo = mid + 1;
212 |           }
213 |         } else {
214 |           return mid;
215 |         }
216 |       }
217 |     },
218 | 
219 |     findBlocksInViewport(viewportBegin, viewportEnd, transformedData, data) {
220 |       // 当视窗的开始高度小于视窗结束的高度
221 |       if (viewportBegin < viewportEnd) {
222 |         // 判断flxedBlockHeight是否存在
223 |         // 开始下标
224 |         const lo = this.flxedBlockHeight
225 |           ? this.findBlockHeightLowerBound(viewportBegin, this.flxedBlockHeight)
226 |           : this.binarySearchLowerBound(viewportBegin, transformedData);
227 |         // 结束下标
228 |         const hi = this.flxedBlockHeight
229 |           ? this.findBlockHeightUpperBound(viewportEnd, this.flxedBlockHeight)
230 |           : this.binarySearchUpperBound(viewportEnd, transformedData);
231 |         // 计算虚拟偏移量
232 |         let vbOffset = this.pageMode ? this.$refs.vb.offsetTop : 0;
233 |         // 判断是否存在固定的item的高度
234 |         if (this.flxedBlockHeight) {
235 |           this.offsetTop = lo >= 0 ? lo * this.flxedBlockHeight : 0;
236 |           this.offsetBot =
237 |             hi >= 0
238 |               ? (data.length - hi) * this.flxedBlockHeight : 0
239 |         } else {
240 |           this.offsetTop = lo >= 0 ? transformedData[lo] - vbOffset : 0;
241 |           this.offsetBot =
242 |             hi >= 0
243 |               ? transformedData[transformedData.length - 1] -
244 |                 transformedData[hi]
245 |               : 0;
246 |         }
247 |         return data.slice(lo, hi);
248 |       } else {
249 |         this.offsetTop = 0;
250 |         this.offsetBot = 0;
251 |         // 直接返回一个空的列表
252 |         return [];
253 |       }
254 |     },
255 |     // 更新虚拟滚动区域内部的高度
256 |     updateVb(scrollTop) {
257 |       // 计算滚动可视区真实的高度
258 |       const viewportHeight = this.pageMode ? window.innerHeight : this.height;
259 |       this.viewportBegin = scrollTop;
260 |       this.viewportEnd = scrollTop + viewportHeight;
261 |       this.renderList = this.findBlocksInViewport(
262 |         this.viewportBegin,
263 |         this.viewportEnd,
264 |         this.transformedData,
265 |         this.data
266 |       );
267 |     }
268 |   },
269 | 
270 |   computed: {
271 |     containerStyle() {
272 |       return {
273 |         ...(!this.pageMode && { height: `${this.height}px` }),
274 |         ...(!this.pageMode && { "overflow-y": "auto" })
275 |       };
276 |     }
277 |   }
278 | };
279 | </script>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import VirtualListScroll from "./VirtualListScroll"
2 | const plugin = {
3 | 	install(Vue) {
4 | 		Vue.component("VirtualListScroll", VirtualListScroll)
5 | 	}
6 | }
7 | export default plugin


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


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