时间戳

首页 > 解决方案 > 使用 ListView 和 nativescript-vue 进行无限滚动

listview - 使用 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 上实现了它：

<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 实现相同的...

标签： listviewnativescriptnativescript-vue

解决方案

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

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

有关此处loadOnDemand功能的一些附加信息

代码应该与此类似：

<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);
    }
}

推荐阅读