Question

我半成功地使用了离子的discrete convolution和infinite scroll来实现分页。

我能够加载前10个视频，然后到列表末尾，我可以再次提出一个成功请求，以加载后10个视频（屏幕上共有20个视频）。之后，似乎我没有正确地更新const cup = size => (message => message)(size)，所以什么也没发生，只是停留在旋转的“正在加载数据”图标上。

这是我的nextPageToken文件，正在处理滚动并显示视频列表：

.ts

当我滚动到页面底部时，这就是我要获取更多视频的目的。此方法一次会起作用，但随后似乎会被忽略。

...

public videos: Array<any>;
public count = 10;
public pageToken: string;

...

ngOnInit() {
    this.getPlaylistVideos();
}

// get the initial list of 10 videos 
// pass null for pageToken first time
async getPlaylistVideos() {
    console.log('getting initial video list');

    const loading = await this.loadingCtrl.create();
    loading.present();

    this.youtubeService.getPlaylistVideos(environment.youtube.playlistId, this.count, null)
        .then(data => {
            loading.dismiss();

            if (data) {
                if (data.items) {
                    this.videos = data.items; // data.items is array of videos
                }
                if (data.nextPageToken) {
                    this.pageToken = data.nextPageToken;  // save the pageToken variable for next request
                }
            } else {
                this.alertCtrl.create({
                    header: 'Error',
                    subHeader: 'There was an error',
                    message: 'Something internet related happened & we couldn\'t load the playlist.',
                    buttons: [{ text: 'Ok', role: 'cancel' }]
                }).then(alert => {
                    alert.present();
                });
            }
        });
}

一旦loadMoreVideos(event) { console.log('--> loadMoreVideos called'); if (this.pageToken) { // pass the pageToken to the service this.youtubeService.getPlaylistVideos(environment.youtube.playlistId, this.count, this.pageToken).then(data => { if (data) { this.pageToken = data.nextPageToken; // update the pageToken data.items.forEach(video => { this.videos.push(video); // add the incoming videos to the list }); } else { this.alertCtrl.create({ header: 'Error', subHeader: 'There was an error', message: 'Something internet related happened & we couldn\'t load the playlist.', buttons: [{ text: 'Ok', role: 'cancel' }] }).then(alert => { alert.present(); }); } }); } }方法加载了接下来的10个视频（此时我将在屏幕上播放20个视频），它将不再执行，而且我不确定为什么。

这是我的youtube服务的样子。

loadMoreVideos

我感觉自己很亲近，但只需要一点推动力就可以克服困难。谢谢您的任何建议！

Answer 1

您似乎已经很接近了-您将获得新的pageToken。看上去像是event.target.complete();末尾缺少forEach一样。

它应该是这样的：

/**
 * Load more videos when scrolling.
 *
 * @param event
 */
loadMoreVideos(event) {
    if (this.pageToken) {
        this.myYoutubeService.getPlaylistVideos(environment.youtube.playlistId, this.count, this.pageToken).then(data => {
            if (data) {
                this.pageToken = data.nextPageToken;
                data.items.forEach(video => {
                    this.videos.push(video);
                });
                event.target.complete();
            } else {
                this.alertCtrl.create({
                    header: 'Error',
                    subHeader: 'There was an error',
                    message: 'Something internet related happened & we couldn\'t load the playlist.',
                    buttons: [{ text: 'Ok', role: 'cancel' }]
                }).then(alert => {
                    alert.present();
                });
            }
        });
    }
}

使用Ionic无限滚动和YouTube v3 API

1 个答案: