我正试图用Ionic Framework构建一个IOS和android应用程序,该应用程序有一个带有Instagram api的Instagram Feed,可以显示标签共享的所有照片(我将使用标签chocolat有一个例子),我想实现"拉"刷新和无限滚动,所以基本上,我会有一个按钮,点击后打开一个带有instagram提要的视图,并拉取前10个结果,拉取刷新会尝试获得较新的结果,然后如果提要向下滚动,它会添加下一组结果(较旧的结果)。我一直在寻找,我已经构建了一些不太符合预期的东西。我是ionic、angularjs和javascript的新手开发人员,所以我决定在这里发布我的问题。
这是我的代码:
通过http:获取instagram json的工厂或服务
app.factory('PhotoService', function($http){
var BASE_URL = "https://api.instagram.com/v1/tags/chocolat/media/recent?access_token=+++";
//access_token hidden for privacy reasons
var items = [];
var nextUrl = 0;
return {
GetFeed: function(){
return $http.get(BASE_URL+'&count=10').then(function(response){
items = response.data.data;
nextUrl = response.data.pagination.next_url;
return items;
});
},
GetNewPhotos: function(){
return $http.get(BASE_URL+'&count=2').then(function(response){
items = response.data.data;
return items;
});
},
GetOldPhotos: function(){
return $http.get(nextUrl).then(function(response){
items = response.data.data;
return items;
});
}
}
});
控制器:
app.controller('CivrInstagramController', function($scope, $timeout, PhotoService) {
$scope.items = [];
$scope.newItems = [];
PhotoService.GetFeed().then(function(items){
$scope.items = items;
});
$scope.doRefresh = function() {
if($scope.newItems.length > 0){
$scope.items = $scope.newItems.concat($scope.items);
//Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
$scope.newItems = [];
} else {
PhotoService.GetNewPhotos().then(function(items){
$scope.items = items.concat($scope.items);
//Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
});
}
};
$scope.loadMore = function(){
PhotoService.GetOldPhotos().then(function(items) {
$scope.items = $scope.items.concat(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
});
视图:
<ion-view view-title="#Chocolat Photos!">
<ion-content>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<div class="list card" ng-repeat="item in items track by item.id">
<div class="item item-avatar">
<img ng-src="{{item.user.profile_picture}}" ng- if="item.user.profile_picture.startsWith('https')">
<h2>{{item.user.full_name}}</h2>
<p><span am-time-ago="item.created_time" am-preprocess="unix"></span></p>
</div>
<div class="item item-body" >
<img ng-src="{{item.images.low_resolution.url}}" ng-if="item.images.low_resolution.url.startsWith('https')">
<p>
{{item.caption.text}}
</p>
</div>
</div>
<ion-infinite-scroll on-infinite="loadMore()" distance="5%"></ion-infinite- scroll>
</ion-content>
</ion-view>
PhotoService.GetFeed()运行良好,因为它正确地填充了前10张照片,然而,当我尝试无限滚动时,我得到了错误:
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys.
我正在逐项使用track.id,正如你在视图中看到的那样,所以我认为这意味着我用PhotoService.GetOldPhotos()一次又一次地得到相同的结果。对于PhotoService.GetNewPhotos(
我做错了什么?有人能给我一些建议吗?提前感谢您抽出时间!这里有一个指向我的项目的plnkr++链接,在那里你可以看到它正在努力工作:\
++您可能需要在浏览器中启用跨源资源共享,以查看提要是否正常工作。
第1版:几乎完成
因此,经过长时间的工作和console.log()的:p之后,我能够通过标签获得一个instagram提要,并使其与ionic pull刷新和ionic无限滚动(我想是90%)一起工作,但我的代码仍然有问题,因为每次我滚动到最后一组项目时,我都无法停止无限滚动或加载more(),他们会试图加载更多数据,因为最后一个nextUrl是未定义的,但是instagramapi接受&next_max_tag_id=未定义,并再次获得最新结果,这导致了一个错误,因为ng repeat中不可能有重复,我不想再次显示第一个结果。
我只需要在没有更多结果时停止loadMore和无限滚动,或者如果&next_max_tag_id=未定义,或者如果两个数组中都有重复(但我不认为这是推荐的性能)。下面是我的项目,谢谢你抽出时间!
我将标记更改为低结果的标记,这样您就可以在不厌倦滚动的情况下看到错误:p
我们单独解决了这个问题,但我想我也会在这里发布答案。主要变化是
- 切换到JSONp以避免CORS约束
- 使用instagram的
min_tag_id
和max_tag_id
格式 - 当没有
next_max_tag_id
时,更新getOldPhotos()
方法以自动返回一个空数组(从技术上讲,它返回一个已经解析为空数组的不同promise。) - 更改
$scope.loadMore()
以检查空响应,并设置一个标志以终止<ion-infinite-scroll>
请在此处查看完整的工作副本:http://plnkr.co/edit/LBW0pp?p=preview