Add bench props to control scroll performance.

Author: tangbc

README.md

@@ -104,18 +104,19 @@ new Vue({
 
 ## Props type
 
-<img height="180" src="https://tangbc.github.io/github-images/vitual-scroll-list-3.png">
+<img height="256" src="https://tangbc.github.io/github-images/vitual-scroll-list-4.png">
 
 *Prop* | *Type* | *Required* | *Description* |
 :--- | :--- | :--- | :--- |
 | size | Number | ✓ | Each list item height, currently only supports fixed height. |
 | remain | Number | ✓ | How many items should be shown in virtual-list viewport, so `size` and `remain` will determine the virtual-list outside container height (size × remian). |
+| bench | Number | * | Default value is equal to `remain`, unreached items count, not show in virtual-list viewport but exist in real DOM, the larger the bench, the higher the scroll performance will achieved.  |
 | start | Number | * | Default value is `0`, the initial scroll start index. It must be integer and in the range of list index, throws a warning if index does not exist.  |
-| debounce | Number | * | Milliseconds of using `debounce` function to ensure scroll event doesn't fire so often that it bricks browser performance, it's disabled by default. |
-| rtag | String | * | Default value is `div`, the virtual-list's root HTMLElement tag name, in all case it's style is set to `display: block;` |
-| rclass | String | * | Default value is an empty string, the virtual-list's root HTMLElement tag's classes. Has the same API has [`v-bind:class`](https://vuejs.org/v2/guide/class-and-style.html) |
-| wtag | String | * | Default value is `div`, the virtual-list's item wrapper HTMLElement tag name, in all case it's style is set to `display: block;` |
-| wclass | String | * | Default value is an empty string, the virtual-list's item wrapper HTMLElement tag's classes. Has the same API has [`v-bind:class`](https://vuejs.org/v2/guide/class-and-style.html) |
+| debounce | Number | * | **It's disabled by default**, milliseconds of using `debounce` function to ensure scroll event doesn't fire so often that it bricks browser performance. |
+| rtag | String | * | Default value is `div`, the virtual-list root HTMLElement tag name, in all case it's style is set to `display: block;` |
+| rclass | String | * | Default value is an empty string, the virtual-list root HTMLElement tag's classes. Has the same API has [`v-bind:class`](https://vuejs.org/v2/guide/class-and-style.html) |
+| wtag | String | * | Default value is `div`, the virtual-list item wrapper HTMLElement tag name, in all case it's style is set to `display: block;` |
+| wclass | String | * | Default value is an empty string, the virtual-list item wrapper HTMLElement tag's classes. Has the same API has [`v-bind:class`](https://vuejs.org/v2/guide/class-and-style.html) |
 | onscroll | Function | * | Called when virtual-list scroll event handling, param: `(e, scrollTop)`. |
 | totop | Function | * | Called when the virtual-list is scrolled to top. |
 | tobottom | Function | * | Called when the virtual-list is scrolled to bottom. |

index.js

@@ -45,6 +45,7 @@
             wclass: { type: String, default: '' },
             start: { type: Number, default: 0 },
             debounce: { type: Number, default: 0 },
+            bench: Number,
             totop: Function,
             tobottom: Function,
             onscroll: Function
@@ -57,9 +58,9 @@
                 end: 0, // End index.
                 total: 0, // All items count.
                 keeps: 0, // Nums keeping in real dom.
-                benchs: 0, // Nums scroll pass should force update.
+                bench: 0, // Nums scroll pass should force update.
                 scrollTop: 0, // Store scrollTop.
-                scrollDirect: 'd', // Scroll direction.
+                scrollDirect: 'd', // Store scroll direction.
                 viewHeight: 0, // Container wrapper viewport height.
                 allPadding: 0, // All padding of not-render-yet doms.
                 paddingTop: 0, // Container wrapper real padding-top.
@@ -128,8 +129,8 @@
                     start = zone.start
                 }
 
-                // If scroll pass items within now benchs, do not update.
-                if (!isOver && (overs > delta.start) && (overs - delta.start <= delta.benchs)) {
+                // For better performance, if scroll pass items within now bench, do not update.
+                if (!isOver && (overs > delta.start) && (overs - delta.start <= delta.bench)) {
                     return
                 }
 
@@ -196,7 +197,6 @@
                 }
 
                 var hasPadding = slots.length > delta.keeps
-
                 delta.total = slots.length
                 delta.paddingTop = this.size * (hasPadding ? delta.start : 0)
                 delta.allPadding = this.size * (hasPadding ? slots.length - delta.keeps : 0)
@@ -209,14 +209,11 @@
 
         beforeMount: function () {
             var delta = this.delta
-            var remain = this.remain
-            var benchs = Math.round(remain / 2)
-
-            delta.benchs = benchs
-            delta.keeps = remain + benchs
-            delta.viewHeight = this.size * remain
-            delta.start = this.start >= remain ? this.start : 0
-            delta.end = this.start + remain + benchs
+            delta.bench = this.bench || this.remain
+            delta.keeps = this.remain + delta.bench
+            delta.viewHeight = this.size * this.remain
+            delta.start = this.start >= this.remain ? this.start : 0
+            delta.end = this.start + this.remain + delta.bench
         },
 
         mounted: function () {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-virtual-scroll-list",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A vue (2.x) component that support big data and infinite loading by using virtual scroll list.",
   "main": "index.js",
   "files": [