feat: support step option for throttle

Author: KyLeoHC

README.md

@@ -131,6 +131,8 @@ Available `Prop` :
 | remain | Number | * | The number of item that show in view port.(default `10`) |
 | keep | Boolean | * | Work with `keep-alive` component,keep scroll position after activated.(default `false`) |
 | enabled | Boolean | * | If you want to render all data directly,please set 'false' for this option.But `toTop`、`toBottom` and `scrolling` event is still available.(default `true`) |
+| debounce | Number | * | Milliseconds of using debounce function to ensure scroll event doesn't fire so often.(disabled by default) |
+| step | Number | * | Pixel of using throttle theory to decrease the frequency of scroll event.(disabled by default) |
 
 Available `Event` :
 

dist/vue-scroll-list.common.js

@@ -33,11 +33,16 @@ var component = {
         },
         debounce: {
             type: Number
+        },
+        step: { // throttle
+            type: Number
         }
     },
     methods: {
         handleScroll: function handleScroll(event) {
             var scrollTop = this.$el.scrollTop;
+            if (!this.ignoreStep && this.step && Math.abs(scrollTop - this.scrollTop) < this.step) return;
+            this.ignoreStep = false;
             this.scrollTop = scrollTop;
             this.$emit('scrolling', event);
             this.updateZone(scrollTop);
@@ -171,6 +176,7 @@ var component = {
     activated: function activated() {
         // while work with keep-alive component
         // set scroll position after 'activated'
+        this.ignoreStep = true;
         this.$el.scrollTop = this.keep ? this.scrollTop || 1 : 1;
     },
     render: function render(h) {

dist/vue-scroll-list.esm.js

@@ -31,11 +31,16 @@ var component = {
         },
         debounce: {
             type: Number
+        },
+        step: { // throttle
+            type: Number
         }
     },
     methods: {
         handleScroll: function handleScroll(event) {
             var scrollTop = this.$el.scrollTop;
+            if (!this.ignoreStep && this.step && Math.abs(scrollTop - this.scrollTop) < this.step) return;
+            this.ignoreStep = false;
             this.scrollTop = scrollTop;
             this.$emit('scrolling', event);
             this.updateZone(scrollTop);
@@ -169,6 +174,7 @@ var component = {
     activated: function activated() {
         // while work with keep-alive component
         // set scroll position after 'activated'
+        this.ignoreStep = true;
         this.$el.scrollTop = this.keep ? this.scrollTop || 1 : 1;
     },
     render: function render(h) {

dist/vue-scroll-list.js

@@ -37,11 +37,16 @@ var component = {
         },
         debounce: {
             type: Number
+        },
+        step: { // throttle
+            type: Number
         }
     },
     methods: {
         handleScroll: function handleScroll(event) {
             var scrollTop = this.$el.scrollTop;
+            if (!this.ignoreStep && this.step && Math.abs(scrollTop - this.scrollTop) < this.step) return;
+            this.ignoreStep = false;
             this.scrollTop = scrollTop;
             this.$emit('scrolling', event);
             this.updateZone(scrollTop);
@@ -175,6 +180,7 @@ var component = {
     activated: function activated() {
         // while work with keep-alive component
         // set scroll position after 'activated'
+        this.ignoreStep = true;
         this.$el.scrollTop = this.keep ? this.scrollTop || 1 : 1;
     },
     render: function render(h) {

example/componentA.vue

@@ -6,6 +6,7 @@
                 :remain="10"
                 :enabled="true"
                 :keep="true"
+                :step="5"
                 @toTop="onTop"
                 @toBottom="onBottom"
                 @scrolling="onScroll">

src/index.js

@@ -28,11 +28,16 @@ const component = {
         },
         debounce: {
             type: Number
+        },
+        step: { // throttle
+            type: Number
         }
     },
     methods: {
         handleScroll(event) {
             const scrollTop = this.$el.scrollTop;
+            if (!this.ignoreStep && this.step && Math.abs(scrollTop - this.scrollTop) < this.step) return;
+            this.ignoreStep = false;
             this.scrollTop = scrollTop;
             this.$emit('scrolling', event);
             this.updateZone(scrollTop);
@@ -160,6 +165,7 @@ const component = {
     activated() {
         // while work with keep-alive component
         // set scroll position after 'activated'
+        this.ignoreStep = true;
         this.$el.scrollTop = this.keep ? (this.scrollTop || 1) : 1;
     },
     render(h) {