ion-infinite-scroll解决数据加载慢的问题

1、ion-view中显示数据的代码

....

ng-if="!noMoreItemsAvailable" icon="ion-loading-d" on-infinite="loadMore()" distance="5%">

2、controller中实现动态加载数据

$scope.noMoreItemsAvailable = false;

var len = 0;

$scope.loadMore = function() {

var loadLenth = len;

if ($scope.switchCache.length - len < 12) {

len += $scope.switchCache.length - len;

} else {

len += 12;

}

if ($scope.items.length < $scope.switchCache.length) {

for (var i = loadLenth; i < len; i++) {

$scope.items.push({

id: $scope.switchCache[i].signalid, signalname:

$scope.switchCache[i].signalname, value: $scope.switchCache[i].value });

}

}

// console.log("len: " + len);

if ($scope.items.length == $scope.switchCache.length) {

$scope.noMoreItemsAvailable = true;

}

$scope.$broadcast('scroll.infiniteScrollComplete');

};

//返回list顶部

$scope.scrollMainToTop = function() {

$ionicScrollDelegate.scrollTop();

}

前端面试题每日更新，欢迎参与讨论，地址：https://github.com/daily-interview/fe-interview。

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

脑筋急转弯：

生活小窍门