使用 ListView 和 nativescript-vue 无限滚动

如何解决使用 ListView 和 nativescript-vue 无限滚动

我想知道是否可以使用 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 实现相同的...

解决方法

您可以使用 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);
    }
}