使用Ionic无限滚动和YouTube v3 API

Question

我半成功地使用了ionic的无限滚动和YouTube API来实现分页。

我可以加载前10个视频，然后当我到达列表的末尾时，我可以再提出一个成功的请求来加载接下来的10个视频(屏幕上总共有20个视频)。在那之后，我似乎没有正确更新nextPageToken，所以什么都没发生，我只是被旋转的"加载数据"图标卡住了。

这是我的CCD_ 2文件，它正在处理滚动&显示视频列表：

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

一旦loadMoreVideos方法加载了接下来的10个视频(此时屏幕上会有20个)，它就不再执行了，我不知道为什么。

这是我的youtube服务的样子。

getPlaylistVideos(playlistId: string, count: number, pageToken: string): Promise<any> {
try {
if (pageToken) {
console.log('incoming pageToken: ', pageToken);
return new Promise(resolve => {
this.http.get(`${ environment.youtube.baseUrl }playlistItems?key=${ environment.youtube.apiKey }&playlistId=${ playlistId }&part=snippet,id&maxResults=${ count }&pageToken=${ pageToken }&order=date`)
.subscribe(data => {
resolve(data);
}, error => {
console.error(error);
});
});
} else {
console.log('no page token');
return new Promise(resolve => {
this.http.get(`${ environment.youtube.baseUrl }playlistItems?key=${ environment.youtube.apiKey }&playlistId=${ playlistId }&part=snippet,id&maxResults=${ count }&order=date`)
.subscribe(data => {
resolve(data);
}, error => {
console.error(error);
});
});
}
} catch (error) {
console.error('Error: something really bad happened trying to get the videos.');
console.error(error);
}
}

我觉得我已经很接近了，但只需要一点推力就可以克服困难。谢谢你的建议！

Answer 1

看起来你已经非常接近了——你得到了新的pageToken。您在forEach末尾缺少event.target.complete();。

这就是它应该看起来的样子：

/**
* 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();
});
}
});
}
}