tangbc · tangbc · Mar 2, 2019 · Feb 23, 2019
diff --git a/examples/build/finite-m.js b/examples/build/finite-m.js
diff --git a/examples/build/finite.js b/examples/build/finite.js
diff --git a/examples/build/infinite.js b/examples/build/infinite.js
diff --git a/examples/build/variable.js b/examples/build/variable.js
diff --git a/examples/entries.js b/examples/entries.js
@@ -1,6 +1,7 @@
 
 module.exports = [
     'finite',
+    'finite-m',
     'infinite',
     'variable',
 ]
diff --git a/examples/finite-m/finite.vue b/examples/finite-m/finite.vue
@@ -0,0 +1,123 @@
+<template>
+    <div>
+        <div class="scrollToIndex">
+            <span>Scroll to index: </span>
+            <input type="text" v-model.number.lazy="startIndex">
+            <small>Change and blur to set start index.</small>
+        </div>
+        <VirtualList :size="50" :remain="6" :bench="44" class="list" :start="startIndex"
+            :items="items" :item-component="itemComponent" :item-binding="itemBinding">
+        </VirtualList>
+        <div class="source">
+            <a href="https://github.com/tangbc/vue-virtual-scroll-list/blob/master/examples/finite/finite.vue#L1">
+                View this demo source code
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Item from './item.vue'
+    import VirtualList from 'vue-virtual-scroll-list'
+
+    export default {
+        name: 'finite-test',
+
+        components: { Item, VirtualList },
+
+        data () {
+            return {
+                itemComponent: Item,
+                startIndex: 0,
+                items: ((n) => {
+                    let temp = [];
+
+                    for (let i = 0; i < n; ++i) {
+                        temp.push(i);
+                        // temp.push({
+                        //     id: `id-${i}`,
+                        //     num: i
+                        // });
+                    }
+
+                    return temp;
+                })(100000)
+            }
+        },
+
+        methods: {
+            // simple variable test
+            // variableHeight() {
+            //     return 45;
+            // },
+
+            itemBinding(item, idx) {
+                return {
+                    key: item,
+                    props: {
+                        index: item
+                    }
+                };
+
+                // return {
+                //     key: item.id,
+                //     props: {
+                //         index: item.num,
+                //     },
+                //     nativeOn: {
+                //         dblclick: (...args) => {
+                //             console.log(idx, 'dblclick');
+                //         }
+                //     }
+                // }
+            }
+        }
+    }
+</script>
+
+<style>
+    .scrollToIndex {
+        padding-bottom: 20px;
+    }
+    input {
+        outline: none;
+        padding: .4em .5em;
+        width: 55px;
+        height: 16px;
+        border-radius: 3px;
+        border: 1px solid;
+        border-color: #dddddd;
+        font-size: 16px;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+    }
+    input:focus {
+        border-color: #6495ed;
+    }
+    small {
+        color: #999;
+    }
+    .list {
+        background: #fff;
+        border-radius: 3px;
+        border: 1px solid #ddd;
+        -webkit-overflow-scrolling: touch;
+        overflow-scrolling: touch;
+    }
+    .source {
+        text-align: center;
+        padding-top: 20px;
+    }
+    .source a {
+        color: #999;
+        text-decoration: none;
+        font-weight: 100;
+    }
+    @media (max-width: 640px) {
+        small {
+            display: none;
+        }
+    }
+</style>
+
diff --git a/examples/finite-m/index.html b/examples/finite-m/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+    <meta charset="utf-8">
+    <title>Vue virtual list (finite data)</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+    body {
+        background: #fffaf0;
+    }
+    .appWraper {
+        width: 440px;
+        margin: 0 auto;
+        overflow-y: auto;
+    }
+    .title {
+        font-size: 25px;
+        font-weight: 100;
+        text-align: center;
+    }
+    @media (max-width: 640px) {
+        .appWraper {
+            width: 100%;
+        }
+        .title {
+            font-size: 16px;
+        }
+    }
+    </style>
+</head>
+<body>
+    <h1 class="title">
+        Vue virtual list, with 100,000 finite data.
+    </h1>
+    <div class="appWraper">
+        <div id="app"></div>
+    </div>
+    <script src="../build/finite-m.js"></script>
+</body>
+</html>
diff --git a/examples/finite-m/index.js b/examples/finite-m/index.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import FiniteDemo from './finite.vue'
+
+Vue.config.devtools = false
+Vue.config.productionTip = false
+
+new Vue({
+    el: '#app',
+    template: '<FiniteDemo />',
+    components: { FiniteDemo }
+})
diff --git a/examples/finite-m/item.vue b/examples/finite-m/item.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="item">Item # {{ index }}</div>
+</template>
+
+<script>
+    export default {
+        props: {
+            index: Number
+        }
+    }
+</script>
+
+<style>
+    .item {
+        height: 50px;
+        line-height: 50px;
+        padding-left: 20px;
+        border-bottom: 1px solid #eee;
+    }
+</style>
diff --git a/index.js b/index.js
@@ -38,6 +38,14 @@
         props: {
             size: { type: Number, required: true },
             remain: { type: Number, required: true },
+
+            // replace from vue $slots.default vnodes to pure data set
+            items: {type: Array, default: () => []},
+            // for creating vnodes
+            itemComponent: {type: Object},
+            // for passing props or events to itemComponent
+            itemBinding: {type: Function, default: () => {}},
+
             rtag: { type: String, default: 'div' },
             wtag: { type: String, default: 'div' },
             wclass: { type: String, default: '' },
@@ -214,7 +222,12 @@
                 if (typeof this.variable === 'function') {
                     return this.variable(index) || 0
                 } else {
-                    var slot = this.$slots.default[index]
+                    var slot = !this.itemComponent ? this.$slots.default[index]
+                        // when using itemComponent, it can only get current components height,
+                        // need to be enhanced, or consider using variable-function instead
+                        : this.$children[index] ? this.$children[index].$vnode
+                            : undefined
+
                     var style = slot && slot.data && slot.data.style
                     if (style && style.height) {
                         var shm = style.height.match(/^(.*)px$/)
@@ -306,12 +319,20 @@
                 var delta = this.delta
                 var slots = this.$slots.default
 
-                if (!slots) {
-                    slots = []
-                    delta.start = 0
-                }
+                if (!this.itemComponent) {
+                    if (!slots) {
+                        slots = []
+                        delta.start = 0
+                    }
 
-                delta.total = slots.length
+                    delta.total = slots.length
+                } else {
+                    if (!this.items.length) {
+                        delta.start = 0
+                    }
+
+                    delta.total = this.items.length
+                }
 
                 var paddingTop, paddingBottom, allHeight
                 var hasPadding = delta.total > delta.keeps
@@ -331,9 +352,14 @@
                 delta.offsetAll = allHeight - this.size * this.remain
 
                 var targets = []
+
                 for (var i = delta.start; i <= Math.ceil(delta.end); i++) {
-                    targets.push(slots[i])
+                    targets.push(!this.itemComponent ? slots[i]
+                        // create vnode, using custom attrs binder (see example "finite-m")
+                        : this.$createElement(this.itemComponent, this.itemBinding(this.items[i], i) || {})
+                    )
                 }
+
                 return targets
             }
         },