feat: update event provide range of the visible items (#115)

Author: cplussharp

Diff for: README.md

@@ -200,7 +200,7 @@ When the user scrolls inside RecycleScroller, the views are mostly just moved ar
 - `resize`: emitted when the size of the scroller changes.
 - `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)`: emitted each time the views are updated, only if `emitUpdate` prop is `true`
+- `update (startIndex, endIndex, visibleStartIndex, visibleEndIndex)`: emitted each time the views are updated, only if `emitUpdate` prop is `true`
 
 ### Default scoped slot props
 

Diff for: docs-src/src/components/DynamicScrollerDemo.vue

@@ -5,12 +5,15 @@
         v-model="search"
         placeholder="Filter..."
       >
+      <span>({{ updateParts.viewStartIdx }} - [{{ updateParts.visibleStartIdx }} - {{ updateParts.visibleEndIdx }}] - {{ updateParts.viewEndIdx }})</span>
     </div>
 
     <DynamicScroller
       :items="filteredItems"
       :min-item-size="54"
+      :emit-update="true"
       class="scroller"
+      @update="onUpdate"
     >
       <template #before>
         <div class="notice">
@@ -72,6 +75,7 @@ export default {
     return {
       items,
       search: '',
+      updateParts: { viewStartIdx: 0, viewEndIdx: 0, visibleStartIdx: 0, visibleEndIdx: 0 },
     }
   },
 
@@ -88,6 +92,13 @@ export default {
     changeMessage (message) {
       Object.assign(message, generateMessage())
     },
+
+    onUpdate (viewStartIndex, viewEndIndex, visibleStartIndex, visibleEndIndex) {
+      this.updateParts.viewStartIdx = viewStartIndex
+      this.updateParts.viewEndIdx = viewEndIndex
+      this.updateParts.visibleStartIdx = visibleStartIndex
+      this.updateParts.visibleEndIdx = visibleEndIndex
+    },
   },
 }
 </script>
@@ -102,6 +113,19 @@ export default {
   overflow: hidden;
 }
 
+.scroller {
+  border: solid 1px #42b983;
+}
+
+.toolbar {
+  flex: auto 0 0;
+  text-align: center;
+}
+
+.toolbar > *:not(:last-child) {
+  margin-right: 24px;
+}
+
 .notice {
   padding: 24px;
   font-size: 20px;

Diff for: docs-src/src/components/RecycleScrollerDemo.vue

@@ -46,6 +46,13 @@
         <button @mousedown="renderScroller = !renderScroller">Toggle render</button>
         <button @mousedown="showScroller = !showScroller">Toggle visibility</button>
       </span>
+      <label>
+        <input
+          v-model="showMessageBeforeItems"
+          type="checkbox"
+        > show message before items
+      </label>
+      <span>({{ updateParts.viewStartIdx }} - [{{ updateParts.visibleStartIdx }} - {{ updateParts.visibleEndIdx }}] - {{ updateParts.viewEndIdx }})</span>
     </div>
 
     <div
@@ -64,6 +71,8 @@
           :page-mode="pageMode"
           key-field="id"
           size-field="height"
+          :emit-update="true"
+          @update="onUpdate"
           @visible="onVisible"
           @hidden="onHidden"
         >
@@ -113,6 +122,8 @@ export default {
     enableLetters: true,
     pageMode: false,
     pageModeFullPage: true,
+    updateParts: { viewStartIdx: 0, viewEndIdx: 0, visibleStartIdx: 0, visibleEndIdx: 0 },
+    showMessageBeforeItems: true,
   }),
 
   computed: {
@@ -138,7 +149,7 @@ export default {
       return this.items.map(
         item => Object.assign({}, {
           random: Math.random(),
-        }, item)
+        }, item),
       )
     },
   },
@@ -160,7 +171,7 @@ export default {
   methods: {
     generateItems () {
       console.log('Generating ' + this.count + ' items...')
-      let time = Date.now()
+      const time = Date.now()
       const items = getData(this.count, this.enableLetters)
       console.log('Generated ' + items.length + ' in ' + (Date.now() - time) + 'ms')
       this._dirty = true
@@ -171,8 +182,11 @@ export default {
       addItem(this.items)
     },
 
-    onUpdate (startIndex, endIndex) {
-      this.updateCount++
+    onUpdate (viewStartIndex, viewEndIndex, visibleStartIndex, visibleEndIndex) {
+      this.updateParts.viewStartIdx = viewStartIndex
+      this.updateParts.viewEndIdx = viewEndIndex
+      this.updateParts.visibleStartIdx = visibleStartIndex
+      this.updateParts.visibleEndIdx = visibleEndIndex
     },
 
     onVisible () {
@@ -227,6 +241,12 @@ export default {
   height: 100%;
 }
 
+.notice {
+  padding: 24px;
+  font-size: 20px;
+  color: #999;
+}
+
 .letter {
   text-transform: uppercase;
   color: grey;

Diff for: src/components/RecycleScroller.vue

@@ -11,8 +11,8 @@
   >
     <div
       v-if="$slots.before"
-      class="vue-recycle-scroller__slot"
       ref="before"
+      class="vue-recycle-scroller__slot"
     >
       <slot
         name="before"
@@ -43,8 +43,8 @@
 
     <div
       v-if="$slots.after"
-      class="vue-recycle-scroller__slot"
       ref="after"
+      class="vue-recycle-scroller__slot"
     >
       <slot
         name="after"
@@ -208,12 +208,12 @@ export default {
     })
   },
 
-  activated() {
-    const lastPosition = this.$_lastUpdateScrollPosition;
+  activated () {
+    const lastPosition = this.$_lastUpdateScrollPosition
     if (typeof lastPosition === 'number') {
       this.$nextTick(() => {
-        this.scrollToPosition(lastPosition);
-      });
+        this.scrollToPosition(lastPosition)
+      })
     }
   },
 
@@ -306,12 +306,13 @@ export default {
       const pool = this.pool
       let startIndex, endIndex
       let totalSize
+      let visibleStartIndex, visibleEndIndex
 
       if (!count) {
-        startIndex = endIndex = totalSize = 0
+        startIndex = endIndex = visibleStartIndex = visibleEndIndex = totalSize = 0
       } else if (this.$_prerender) {
-        startIndex = 0
-        endIndex = this.prerender
+        startIndex = visibleStartIndex = 0
+        endIndex = visibleEndIndex = this.prerender
         totalSize = null
       } else {
         const scroll = this.getScroll()
@@ -333,15 +334,16 @@ export default {
         scroll.end += buffer
 
         // account for leading slot
-        if (this.$refs.before){
-          const lead = this.$refs.before.scrollHeight;
-          scroll.start -= lead;
+        let beforeSize = 0
+        if (this.$refs.before) {
+          beforeSize = this.$refs.before.scrollHeight
+          scroll.start -= beforeSize
         }
 
         // account for trailing slot
-        if (this.$refs.after){
-          const trail = this.$refs.after.scrollHeight;
-          scroll.end += trail;
+        if (this.$refs.after) {
+          const afterSize = this.$refs.after.scrollHeight
+          scroll.end += afterSize
         }
 
         // Variable size mode
@@ -378,14 +380,24 @@ export default {
             // Bounds
             endIndex > count && (endIndex = count)
           }
+
+          // search visible startIndex
+          for (visibleStartIndex = startIndex; visibleStartIndex < count && (beforeSize + sizes[visibleStartIndex].accumulator) < scroll.start; visibleStartIndex++);
+
+          // search visible endIndex
+          for (visibleEndIndex = visibleStartIndex; visibleEndIndex < count && (beforeSize + sizes[visibleEndIndex].accumulator) < scroll.end; visibleEndIndex++);
         } else {
           // Fixed size mode
           startIndex = ~~(scroll.start / itemSize)
           endIndex = Math.ceil(scroll.end / itemSize)
+          visibleStartIndex = Math.max(0, Math.floor((scroll.start - beforeSize) / itemSize))
+          visibleEndIndex = Math.floor((scroll.end - beforeSize) / itemSize)
 
           // Bounds
           startIndex < 0 && (startIndex = 0)
           endIndex > count && (endIndex = count)
+          visibleStartIndex < 0 && (visibleStartIndex = 0)
+          visibleEndIndex > count && (visibleEndIndex = count)
 
           totalSize = count * itemSize
         }
@@ -506,7 +518,7 @@ export default {
       this.$_startIndex = startIndex
       this.$_endIndex = endIndex
 
-      if (this.emitUpdate) this.$emit('update', startIndex, endIndex)
+      if (this.emitUpdate) this.$emit('update', startIndex, endIndex, visibleStartIndex, visibleEndIndex)
 
       // After the user has finished scrolling
       // Sort views so text selection is correct