使用 ListView 和 nativescript-vue 进行无限滚动答案

【问题标题】：Infinite scroll with ListView and nativescript-vue使用 ListView 和 nativescript-vue 进行无限滚动
【发布时间】：2021-07-20 05:41:47
【问题描述】：

我想知道是否可以使用nativescript-vue在ListView上实现无限滚动。

目前，我只看到 @itemTap 事件，但看不到其他事件可与 ListView 和 nativescript-vue 一起使用来实现无限滚动。

<ListView class="list-view" v-for="(post, indexPost) in posts" @itemTap="loadMore">
  <v-template>
    <StackLayout class="list-element" orientation="vertical">
      <post :post="post" />
    </StackLayout>
  </v-template>
</ListView>

我想听听 ListView 上的滚动。

使用 vue-native，我在滚动视图上实现它：

<scroll-view :on-scroll="(event) => {loadMore(event)}" :scroll-event-throttle="400">
  <post v-for="(post, indexPost) in posts" :post="post" />
</scroll-view>

...

loadMore: function (event) {
  let paddingToBottom = 0;

  paddingToBottom += event.nativeEvent.layoutMeasurement.height;

  if (event.nativeEvent.contentOffset.y >= event.nativeEvent.contentSize.height - paddingToBottom) {
    this.getData()
  }
},

我想用 nativescript-vue 实现同样的功能...

【问题讨论】：

标签： listview nativescript nativescript-vue

【解决方案1】：

您可以使用 Nativescript 的 RadListView 代替常规的 ListView。这是docs 和api 的链接。

RadListView 有一个名为loadOnDemand 的属性，让您可以添加一种方法来触发getData 并更新列表视图。

关于loadOnDemand 功能here 的一些附加信息

代码应该是这样的：

<lv:RadListView id="ls" items="{{ dataItems }}"  row="0" loadOnDemandMode="Manual" loadMoreDataRequested="{{onLoadMoreItemsRequested}}">

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

    if (listView) {
        // Call the optimized function for on-demand loading finished.
        // (with 0 because the ObservableArray has already
        // notified about the inserted items)
        listView.notifyAppendItemsOnDemandFinished(0, this._sourceDataItems.length === 0);
    }
}

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

【讨论】：