height accumulator changes + recycle-list fixes

Author: Akryum

src/components/RecycleList.vue

@@ -17,17 +17,21 @@
       >
         <slot
           :item="view.item"
+          :active="view.nr.used"
         />
       </div>
     </div>
 
+    <slot
+      name="after-container"
+    />
+
     <resize-observer @notify="handleResize" />
   </div>
 </template>
 
 <script>
 import Scroller from '../mixins/scroller'
-import { clearTimeout, setTimeout } from 'timers';
 
 let uid = 0
 
@@ -66,10 +70,13 @@ export default {
         checkItem: false,
       })
     },
-    heights () {
-      this.updateVisibleItems({
-        checkItem: false,
-      })
+    heights: {
+      handler () {
+        this.updateVisibleItems({
+          checkItem: false,
+        })
+      },
+      deep: true,
     },
   },
 
@@ -124,7 +131,7 @@ export default {
       unusedPool.push(view)
       if (!fake) {
         view.nr.used = false
-        view.top = this.totalHeight
+        view.top = -9999
         this.$_views.delete(view.item)
       }
     },
@@ -194,10 +201,10 @@ export default {
         // Searching for startIndex
         do {
           oldI = i
-          h = heights[i]
+          h = heights[i].accumulator
           if (h < scroll.top) {
             a = i
-          } else if (i < count && heights[i + 1] > scroll.top) {
+          } else if (i < count && heights[i + 1].accumulator > scroll.top) {
             b = i
           }
           i = ~~((a + b) / 2)
@@ -206,10 +213,10 @@ export default {
         startIndex = i
 
         // For container style
-        totalHeight = heights[count - 1]
+        totalHeight = heights[count - 1].accumulator
 
         // Searching for endIndex
-        for (endIndex = i; endIndex < count && heights[endIndex] < scroll.bottom; endIndex++);
+        for (endIndex = i; endIndex < count && heights[endIndex].accumulator < scroll.bottom; endIndex++);
         if (endIndex === -1) {
           endIndex = items.length - 1
         } else {
@@ -275,6 +282,11 @@ export default {
         item = items[i]
         view = views.get(item)
 
+        if (!itemHeight && !heights[i].height) {
+          if (view) this.unuseView(view)
+          continue
+        }
+
         // No view assigned to item
         if (!view) {
           type = item[typeField]
@@ -315,7 +327,7 @@ export default {
 
         // Update position
         if (itemHeight === null) {
-          view.top = heights[i - 1]
+          view.top = heights[i - 1].accumulator
         } else {
           view.top = i * itemHeight
         }

src/components/VirtualScroller.vue

@@ -198,10 +198,10 @@ export default {
               // Searching for startIndex
               do {
                 oldI = i
-                h = heights[i]
+                h = heights[i].accumulator
                 if (h < scrollTop) {
                   a = i
-                } else if (i < l && heights[i + 1] > scrollTop) {
+                } else if (i < l && heights[i + 1].accumulator > scrollTop) {
                   b = i
                 }
                 i = ~~((a + b) / 2)
@@ -210,11 +210,11 @@ export default {
               startIndex = i
 
               // For containers style
-              offsetTop = i > 0 ? heights[i - 1] : 0
-              containerHeight = heights[l - 1]
+              offsetTop = i > 0 ? heights[i - 1].accumulator : 0
+              containerHeight = heights[l - 1].accumulator
 
               // Searching for endIndex
-              for (endIndex = i; endIndex < l && heights[endIndex] < scrollBottom; endIndex++);
+              for (endIndex = i; endIndex < l && heights[endIndex].accumulator < scrollBottom; endIndex++);
               if (endIndex === -1) {
                 endIndex = items.length - 1
               } else {

src/mixins/scroller.js

@@ -21,6 +21,10 @@ export default {
       type: [Number, String],
       default: null,
     },
+    minItemHeight: {
+      type: [Number, String],
+      default: null,
+    },
     heightField: {
       type: String,
       default: 'height',
@@ -57,14 +61,17 @@ export default {
     heights () {
       if (this.itemHeight === null) {
         const heights = {
-          '-1': 0,
+          '-1': { accumulator: 0 },
         }
         const items = this.items
         const field = this.heightField
+        const minItemHeight = this.minItemHeight
         let accumulator = 0
+        let current
         for (let i = 0, l = items.length; i < l; i++) {
-          accumulator += items[i][field]
-          heights[i] = accumulator
+          current = items[i][field] || minItemHeight
+          accumulator += current
+          heights[i] = { accumulator, height: current }
         }
         return heights
       }
@@ -132,7 +139,7 @@ export default {
     scrollToItem (index) {
       let scrollTop
       if (this.itemHeight === null) {
-        scrollTop = index > 0 ? this.heights[index - 1] : 0
+        scrollTop = index > 0 ? this.heights[index - 1].accumulator : 0
       } else {
         scrollTop = index * this.itemHeight
       }