feat: Emit events for scroll to begin and end of list (#364)

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>

README.md

@@ -205,6 +205,8 @@ When the user scrolls inside RecycleScroller, the views are mostly just moved ar
 - `visible`: emitted when the scroller considers itself to be visible in the page.
 - `hidden`: emitted when the scroller is hidden in the page.
 - `update (startIndex, endIndex, visibleStartIndex, visibleEndIndex)`: emitted each time the views are updated, only if `emitUpdate` prop is `true`
+- `scroll-start`: emitted when the first item is rendered.
+- `scroll-end`: emitted when the last item is rendered.
 
 ### Default scoped slot props
 

docs-src/src/components/RecycleScrollerDemo.vue

@@ -84,6 +84,8 @@
           @update="onUpdate"
           @visible="onVisible"
           @hidden="onHidden"
+          @scroll-start="onScrollStart"
+          @scroll-end="onScrollEnd"
         >
           <template v-slot="props">
             <div
@@ -206,6 +208,14 @@ export default {
     onHidden () {
       console.log('hidden')
     },
+
+    onScrollStart () {
+      console.log('scroll start')
+    },
+
+    onScrollEnd () {
+      console.log('scroll end')
+    },
   },
 }
 </script>

src/components/RecycleScroller.vue

@@ -499,6 +499,9 @@ export default {
 
         // No view assigned to item
         if (!view) {
+          if (i === items.length - 1) this.$emit('scroll-end')
+          if (i === 0) this.$emit('scroll-start')
+
           type = item[typeField]
           unusedPool = unusedViews.get(type)