如何在direction ='top'中使用vue-infinite-loading

Question

我正在使用打字稿制作vue。

我想在滚动到顶部时加载数据。

所以我试图将vue-infinite-loading与direction =“ top”属性一起使用， 但似乎不像我预期的那样。

我搜索并找到了一些答案，但找不到有效的示例。

我希望当滚动到顶部时，新数据出现在当前位置上方， 但新数据会低于当前位置。

这是正确的工作吗？ 还有其他解决方案可以加载高于当前位置的数据吗？

TS：

import Vue from 'vue';
import { Route } from 'vue-router'
import Component from "nuxt-class-component"
import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios';
import { Watch } from 'vue-property-decorator';

// modal
import { VueWithModalRoute } from '../../../models/vue'

class SchedulerWithRoute extends VueWithModalRoute {
$route: Route
}

@Component({
components: {
    InfiniteLoading
},
data: function () {
    return {
        distance: 100,
        list: [],
    };
},
template: require('./index.html')
})

export default class Todo extends VueWithModalRoute {
height: any= 0;

@Watch('height')
onheightChange(newVal, oldVal) {
    console.log('height change');

    var diff = newVal - oldVal;

    (this.$refs.scrollWrapper as any).scrollTop = diff;
}


getlist($state) {
    setTimeout(() => {

        const temp = [];
        for (let i = this.$data.list.length + 1; i <= this.$data.list.length + 60; i++)
        {
            temp.push(i);
        }
        this.$data.list = this.$data.list.concat(temp);

        if (this.$data.list.length > 500) {
            $state.complete();
        }
        $state.loaded();

        this.height = (this.$refs.scrollWrapper as any).scrollHeight

    }, 1000);
}

}

HTML：         

<infinite-loading @infinite="getlist" ref="infiniteLoading" spinner="circles" direction='top'>
    <span slot="no-more">
            There is no more data
    </span>
</infinite-loading>

<div v-for="(item, key) in list">
    {{key}} : <span v-text="item"></span>
</div>

结果：