我如何使用 nativescript 按需加载功能

Question

编辑

我能够让它工作，但现在的一个问题是，在它创建和显示其他项目之前添加额外的空项目。注意按需加载功能工作正常，但我不知道为什么会创建一个额外的空项目。我想我的代码有问题

const viewModel = observableModule.fromObject({
    _sourceDataItems: [],
    dataItems: new ObservableArray(),
    initDataItems: function () {
      var url="https://adekunletestprojects.000webhostapp.com/skog/searchResults.php?search=" + encodeURIComponent("Adeyeye") + "&location=" + encodeURIComponent("Lagos");
      fetch(url).then((response) => response.json()).then((res) => {
        this._sourceDataItems = new ObservableArray(res.items);
        this.dataItems.push(this._sourceDataItems);

      }).catch((err) => {
        var toast = Toast.makeText("Unable to load users");
        toast.show();
      });
    },
    addMoreItemsFromSource: function (chunkSize) {
      console.log(this._sourceDataItems);
      let newItems = this._sourceDataItems.splice(0, chunkSize);
      this.dataItems.push(newItems);
    },

    onLoadMoreItemsRequested: function (args) {
      console.log("---load more item---");
      const that = new WeakRef(this);
      const listView = args.object;
      if (this._sourceDataItems.length > 0) {
        setTimeout(function () {
          that.get().addMoreItemsFromSource(10);
          listView.notifyLoadOnDemandFinished();
        }, 1500);
        args.returnValue = true;
      } else {
        args.returnValue = false;
        listView.notifyLoadOnDemandFinished(true);
      }
    },
});

Answer 1

搜索-查看-model.js

_sourceDataItems: new ObservableArray(),
    dataItems: new ObservableArray(),
    initDataItems: function () {
      var url = "https://adekunletestprojects.000webhostapp.com/skog/searchResults.php?search=" + encodeURIComponent("Adeyeye") + "&location=" + encodeURIComponent("Lagos");
      fetch(url).then((response) => response.json()).then((res) => {
        this._sourceDataItems = res.items; 
        this.addMoreItemsFromSource(6);
      }).catch((err) => {
        alert(err.message);
      });
    },
    addMoreItemsFromSource: function (chunkSize) {
      console.log(this._sourceDataItems);
      let newItems = this._sourceDataItems.splice(0, chunkSize);
      this.dataItems.push(newItems);
    },

    onLoadMoreItemsRequested: function (args) {
      console.log("---load more item---");
      const that = new WeakRef(this);
      const listView = args.object;
      if (this._sourceDataItems.length > 0) {
        setTimeout(function () {
          that.get().addMoreItemsFromSource(10);
          listView.notifyLoadOnDemandFinished();
        }, 1500);
        args.returnValue = true;
      } else {
        args.returnValue = false;
        listView.notifyLoadOnDemandFinished(true);
      }

    },

Search.js

exports.pageLoaded = function (args) {
  const page = args.object;
  var searchViewModel = new SearchViewModel();
  page.bindingContext = searchViewModel;
  searchViewModel.initDataItems();
  searchViewModel.addMoreItemsFromSource(5);
}

我如何使用 nativescript 按需加载功能

How do i use nativescript load on demand funtion

javascript

nativescript