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

Posted 2023-04-13

【中文标题】使用 ListView 和 nativescript-vue 进行无限滚动

【英文标题】：Infinite scroll with ListView and 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 实现同样的功能...

【参考方案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);