离子列表无限滚动问题与Assinc请求
Ionic list infinite scroll issue with assync request
我对assync请求填充的Ionic列表有问题。
在HTML中,我有以下内容:
<ion-list class="list" ng-init="setDateRange('today');" >
<!--IF NO ITEM IS FOUND -->
<ion-item class="listCenter" ng-if="listData.length == 0 || listData.length == null">
<h2>No data found, try to make few calls</h2>
</ion-item>
<ion-item class="item" ng-repeat="listDataItem in listData">
<!--HTML CONTENT OF ITEM REMOVED FROM EXAMPLE -->
</ion-item>
<ion-infinite-scroll
icon="ion-loading-c"
distance="10%"
on-infinite="setDateRange('past')">
</ion-infinite-scroll>
</ion-list>
在ng中,init被称为方法setDateRange方法,该方法在数据库上的分离方法中触发assync请求。
我认为,这个问题可能是在updateList和createList中$broadcast方法scroll.infiniteScrollComplete的实现中,如下所示。
$scope.updateList = function() {
console.log('Trying to update list');
$timeout(function() {
$scope.$apply(function() {
listData.forEach(function(item){
$scope.listData.push(item);
console.log("List length is "+ $scope.listData.length);
});
$ionicLoading.hide();
});
$scope.$broadcast('scroll.infiniteScrollComplete'); // should be removed in production
$scope.$broadcast('scroll.resize');
});
};
$scope.createList = function() {
console.log('Trying to render list');
alert("render");
$timeout(function() {
$scope.$apply(function() {
$scope.listData = listData;
console.log("List length is "+ $scope.listData.length);
});
// Infinite scroll broadcast should be here to avoid
// triggering of the on-infinite event
$scope.$broadcast('scroll.infiniteScrollComplete');
});
$ionicLoading.hide();
};
因为在ng过程中,init也被触发了方法updateList,这是无法完成的,因为$scope.listData此时不存在。
有人能告诉我如何实现吗
$scope.$broadcast('scroll.infiniteScrollComplete')
和
$scope.$broadcast('scroll.resize');
以正确的方式?
谢谢你的帮助。
这里有一些注释,以及底部演示的链接,以显示完整的实现。如果没有完整的代码进行测试并查看是否存在其他瓶颈,就有点难以判断。
- 我不会使用
ng-init
,只是在你的控制器中调用它。然后你就知道什么时候会发生 - 您可以通过在控制器
$scope.listData = [];
中设置一个变量来初始化您的模型 - 您不应该广播
scroll.resize
事件。您应该将ionList
放置在ionContent
或ionScroll
中 - 不需要将
class="item"
放在<ion-item>
上,而是自动添加 - 您将希望在无限滚动中添加一个
ng-if
,以便它知道何时停止加载更多数据(请参阅下面的示例) - 您应该避免总是使用
$scope.apply()
,在这种情况下,您无论如何都不需要它
这是我最近制作的一个代码笔,其中有一个使用infiniteScroll的好例子,它可能会帮助你理解如何正确使用它。http://codepen.io/gnomeontherun/pen/HJkCj
相关文章:
- ajax请求的顺序总是不同的
- Meteor如何接收HTTP请求
- 有没有一种方法可以防止img get请求使用css或js发生
- 从ajax请求中获取javascript对象
- JSONP请求返回结果,但也触发error_callback
- 在localhost Dev Box上测试JSONP请求的最佳方式
- Ajax请求文档就绪会导致jquery加载缓慢
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- 在openshift node js应用程序中获取请求
- 反应路由器弄乱了请求网址
- 在我的情况下,如何进行http请求
- 使用密码对话框Javascript请求帮助
- servlet中的请求对象,而不是从jsp接收参数值
- 否'访问控制允许来源'标头存在于IISNOde中请求的资源(AngularJS+NodeJs)上
- JavaScript代码未正确检查ajax请求
- node.js请求数据事件未在CORS ajax调用中触发
- 如何检测第三方广告服务器请求
- 在Rails中更新Div,而不更改更新请求后的视图
- 离子列表无限滚动问题与Assinc请求