nativescript radlist视图按需加载的工作原理

这可能不是问题，但这是从零开始学习本族语脚本时所产生的一系列疑问

我在数据表中存储了1000个或更多的数据列表。我知道我想在列表视图上显示它，但我不想一次读取所有数据。因为我在其他目录中存储了图像，我也想读它。因此，对于20到30个数据，性能相当好。但对于1000个数据，读取数据以及相关图像需要15分钟以上。因为我存储了一些高质量的图像

因此，我决定只读取20个数据及其各自的图像。并将其显示在列表中。知道用户何时到达列表的第15个数据。我决定从服务器上再读取10个数据

知道当我搜索这个时，我遇到了“RadListView按需加载”。 然后我只看了下面的代码

public addMoreItemsFromSource(chunkSize: number) {
    let newItems = this._sourceDataItems.splice(0, chunkSize);
    this.dataItems.push(newItems);
}

public onLoadMoreItemsRequested(args: LoadOnDemandListViewEventData) {
    const that = new WeakRef(this);
    const listView: RadListView = args.object;
    if (this._sourceDataItems.length > 0) {
        setTimeout(function () {
            that.get().addMoreItemsFromSource(2);
            listView.notifyLoadOnDemandFinished();
        }, 1500);
        args.returnValue = true;
    } else {
        args.returnValue = false;
        listView.notifyLoadOnDemandFinished(true);
    }
}

如果要访问绑定元素xml元素，请使用nativescript。我必须在viewmodel中使用observables，或在相关js文件中使用exports.com_名称

但在本例中，它是从public..开始的。。！如何在javascript中使用它

什么是新的WeakRef（这个）？ 为什么需要它

如何识别用户已滚动到15个数据，因为我想在他到达15个数据时加载更多数据

获取数据后，如何更新列表数组并在listview中显示

最后，我只想知道如何使用按需加载

我试图创建一个我尝试过的游乐场示例，但它给出了一个错误。找不到radlistview的模块

记住，我是新生，所以在回答问题时请记住这一点。谢谢,

---

如果您觉得这个问题不符合标准，请修改它。

TypeScript to JavaScript

您可以使用任意代码将源代码转换为JavaScript。例如，甚至还有像官方网站这样的在线编译器

在我看来，很难再期待ES5的例子了。ES6-9引入了许多新特性，使JavaScript开发更加容易，TypeScript将JavaScript提升到了一个新的层次，从解释器到编译器

为了回答您的问题，您将使用原型链在ES5中定义类上的方法

YourClass.prototype.addMoreItemsFromSource = function (chunkSize) {
    var newItems = this._sourceDataItems.splice(0, chunkSize);
    this.dataItems.push(newItems);
};

YourClass.prototype.onLoadMoreItemsRequested = (args) {
    var that = new WeakRef(this);
    var listView = args.object;
    if (this._sourceDataItems.length > 0) {
        setTimeout(function () {
            that.get().addMoreItemsFromSource(2);
            listView.notifyLoadOnDemandFinished();
        }, 1500);
        args.returnValue = true;
    } else {
        args.returnValue = false;
        listView.notifyLoadOnDemandFinished(true);
    }
}

如果您对Observable使用

fromObject

语法，那么这些函数可以在内部传递

addMoreItemsFromSource: function (chunkSize) {
    ....
};

WeakRef:它通过保持对目标的松散引用来帮助有效管理内存，请阅读更多

如何加载更多内容：

如果将

loadOnDemandMode

设置为

Auto

，则每当用户到达滚动结束时，将触发

loadMoreDataRequested

事件

决定在事件结束前应触发多少项

阅读更多关于

如何更新阵列：

---

这正是

addMoreItemsFromSource

函数中显示的内容。在链接到列表视图的ObservableArray上使用

.push（项目）

。

您可以在此处查看更新的答案

---

我有一个疑问，每当我读取数据时，它都会从服务器读取所有数据并返回响应。那么，您是说如果设置了loadOnDemandMode和loadOnDemandBufferSize。。！那么查询将只从数据库中读取少量数据？？？然后在loadMoreDataRequested事件上，我们需要通过跟踪最后接收的数据从数据库中读取更多数据。我完全搞不懂你能不能详细解释一下。注意：-我使用go daddy进行DB管理，php myadmin和sql进行DB操作。我已经尝试过了，但没有得到loadMoreDataRequested事件。您得到的响应完全取决于您的后端开发人员，通常他应该公开参数以支持API上的分页，请仔细阅读

loadOnDemandBufferSize

的定义，它只控制在列表结束前触发请求的时间。我真的很高兴为您服务。我终于找到了它的工作原理。但除了一个问题。为什么自动模式是加载，即使我没有滚动。当新数据加载时，旧数据丢失了。我认为它将被添加到现有的数据数组中。请看这里。这是您代码中的错误，您应该将新项目推送到数组中，而不是覆盖引用。