feat(DynamicScroller): support simple arrays, closes #108

Author: Guillaume Chau

src/components/DynamicScroller.vue

@@ -3,6 +3,7 @@
     ref="scroller"
     :items="itemsWithHeight"
     :min-item-height="minItemHeight"
+    :key-field="simpleArray ? null : keyField"
     v-bind="$attrs"
     @resize="onScrollerResize"
     @visible="onScrollerVisible"
@@ -29,6 +30,7 @@
 
 <script>
 import RecycleScroller from './RecycleScroller.vue'
+import { props, simpleArray } from './common'
 
 export default {
   name: 'DynamicScroller',
@@ -47,20 +49,12 @@ export default {
   },
 
   props: {
-    items: {
-      type: Array,
-      required: true,
-    },
+    ...props,
 
     minItemHeight: {
       type: [Number, String],
       required: true,
     },
-
-    keyField: {
-      type: String,
-      default: 'id',
-    },
   },
 
   data () {
@@ -69,19 +63,21 @@ export default {
         active: true,
         heights: {},
         keyField: this.keyField,
+        simpleArray: false,
       },
     }
   },
 
   computed: {
+    simpleArray,
+
     itemsWithHeight () {
       const result = []
-      const items = this.items
-      const keyField = this.keyField
+      const { items, keyField, simpleArray } = this
       const heights = this.vscrollData.heights
       for (let i = 0; i < items.length; i++) {
         const item = items[i]
-        const id = item[keyField]
+        const id = simpleArray ? i : item[keyField]
         let height = heights[id]
         if (typeof height === 'undefined' && !this.$_undefinedMap[id]) {
           // eslint-disable-next-line vue/no-side-effects-in-computed-properties
@@ -114,6 +110,13 @@ export default {
     items () {
       this.forceUpdate(false)
     },
+
+    simpleArray: {
+      handler (value) {
+        this.vscrollData.simpleArray = value
+      },
+      immediate: true,
+    },
   },
 
   created () {
@@ -151,7 +154,7 @@ export default {
     },
 
     forceUpdate (clear = true) {
-      if (clear) this.vscrollData.heights = {}
+      if (clear || this.simpleArray) this.vscrollData.heights = {}
       this.$emit('vscroll:update', { force: true })
     },
 
@@ -164,8 +167,8 @@ export default {
       if (scroller) scroller.scrollToItem(index)
     },
 
-    getItemSize (item) {
-      const id = item[this.keyField]
+    getItemSize (item, index = undefined) {
+      const id = this.simpleArray ? (index != null ? index : this.items.indexOf(item)) : item[this.keyField]
       return this.vscrollData.heights[id] || 0
     },
 

src/components/DynamicScrollerItem.vue

@@ -9,7 +9,6 @@ export default {
 
   props: {
     item: {
-      type: Object,
       required: true,
     },
 
@@ -23,6 +22,11 @@ export default {
       required: true,
     },
 
+    index: {
+      type: Number,
+      default: undefined,
+    },
+
     sizeDependencies: {
       type: [Array, Object],
       default: null,
@@ -41,7 +45,7 @@ export default {
 
   computed: {
     id () {
-      return this.item[this.vscrollData.keyField]
+      return this.vscrollData.simpleArray ? this.index : this.item[this.vscrollData.keyField]
     },
 
     height () {

src/components/RecycleScroller.vue

@@ -47,6 +47,7 @@ import { ResizeObserver } from 'vue-resize'
 import { ObserveVisibility } from 'vue-observe-visibility'
 import ScrollParent from 'scrollparent'
 import config from '../config'
+import { props, simpleArray } from './common'
 import { supportsPassive } from '../utils'
 
 let uid = 0
@@ -63,10 +64,7 @@ export default {
   },
 
   props: {
-    items: {
-      type: Array,
-      required: true,
-    },
+    ...props,
 
     itemHeight: {
       type: Number,
@@ -88,11 +86,6 @@ export default {
       default: 'type',
     },
 
-    keyField: {
-      type: String,
-      default: 'id',
-    },
-
     buffer: {
       type: Number,
       default: 200,
@@ -143,6 +136,8 @@ export default {
       }
       return []
     },
+
+    simpleArray,
   },
 
   watch: {
@@ -262,7 +257,7 @@ export default {
     updateVisibleItems (checkItem) {
       const itemHeight = this.itemHeight
       const typeField = this.typeField
-      const keyField = this.keyField
+      const keyField = this.simpleArray ? null : this.keyField
       const items = this.items
       const count = items.length
       const heights = this.heights

src/components/common.js

@@ -0,0 +1,15 @@
+export const props = {
+  items: {
+    type: Array,
+    required: true,
+  },
+
+  keyField: {
+    type: String,
+    default: 'id',
+  },
+}
+
+export function simpleArray () {
+  return this.items.length && typeof this.items[0] !== 'object'
+}