精华 理解ionic中的下拉刷新【译】
发布于 2年前 作者 DongHongfei 14784 次浏览 来自 分享

译者注:本人翻译功力有限,所以文中难免有翻译不准确的地方,凑合看吧,牛逼的话你看英文版的去,完事儿欢迎回来指正交流(^_^)。

这篇文章的作者是Andrew McGivery,他是一个在 Android, AngularJS, Ionic, C#, SQL, 等前端开发方面非常屌的人,Andrew经常会写一些关于 Ionic 和如果创建非常棒的hybrid应用的文章。你可以在Andrew的个人博客 阅读更多内容。

随着社交网络的兴起,尤其是在移动应用方面,“feed”已经成为一种流行的设计模式。这种模式就是在顶部添加新项目的方式,从列表的顶部往下拉,直到你看到一个加载的指标,放手,就可以奇迹般地看着新项目(不是真的)会把自己添加进来。

Ionic 有个很棒的指令,最近刚刚经历了重做,现在可以很棒的完成这事儿。在这篇文章中,我们将通过一个基础的例子来讲解这个命令,一个列表,和 Random User API, 来看看怎么配合示例数据来使用命令(你可以在CodePen上随便整)。

ionRefresher (Pull to Refresh Directive)

我们下面要使用的命令就是: ion-refresher (官方文档)。最基础的用法就是:

<ion-refresher on-refresh="doRefresh()"></ion-refresher>

on-refresh应该指向一个$scope 函数 ,可以获得新的数据,更新一个列表,然后让 refresher 知道这已经完成了,这个refresher应该是上述的某种列表。

View

对于我们的例子,我们使用下面的 view 标记:

<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<ion-list>
  <ion-item class="item-avatar" ng-repeat="item in items">
    <img src=" " />
    ##  
    <p> </p>
  </ion-item>
</ion-list>

这看起来是这样的,一旦呈现:

rendered list

记得这个列表使用 $scope.items 来迭代这个数组。

ng-repeat="item in items"

Factory

在我们这个例子里,我们会调用Random User API来得到一些数据来玩儿玩儿。为了达到这个目的,我们会创建一个factory来实现这些API调用。这个 factory 需要有两个方法:GetFeed 和 GetNewUser。我们的应用在刚刚加载初始化数据的时候会调用GetFeed,每次下拉刷新的时候会调用GetNewUser。

.factory('PersonService', function($http){
  var BASE_URL = "http://api.randomuser.me/";
  var items = [];
 
  return {
    GetFeed: function(){
      return $http.get(BASE_URL+'?results=10').then(function(response){
        items = response.data.results;
        return items;
      });
    },
    GetNewUser: function(){
      return $http.get(BASE_URL).then(function(response){
        items = response.data.results;
        return items;
      });
    }
  }
})

我们调用一次GetFeed方法会返回10条记录,每次调用GetNewUser会返回1条记录。

Controller

我们的控制器需要做两件事:

用初始 items 来填充数据 处理下载刷新 首先,为了填充数据,我们想要调用PersonService,来把结果赋给$scope.items 数组:

.controller('MyCtrl', function($scope, $timeout, PersonService) {
  $scope.items = [];
 
  PersonService.GetFeed().then(function(items){
    $scope.items = items;
  });
});

下一步,我们需要来处理下来刷新了。回想一下,我们配置了指令调用一个函数doRefresh。我们需要定义这个函数:

$scope.doRefresh = function() {
 
}

在这个函数里,我们需要调用GetNewUser函数,来把这些项目添加到数组前面。

$scope.doRefresh = function() {
  PersonService.GetNewUser().then(function(items){
    $scope.items = items.concat($scope.items);
  });
};

你可能主要到了,我们使用了array.concat函数来添加项目,这是因为items是一个数组,所以我们需要把两个数组合并。

我们还需要最后做一件事,要让scroller知道我们已经加载完了新项目,可以隐藏加载指示。为了达到这个目的,我们要广播scroll.refreshComplete事件。

$scope.doRefresh = function() {
 PersonService.GetNewUser().then(function(items){
   $scope.items = items.concat($scope.items);

   //Stop the ion-refresher from spinning
   $scope.$broadcast('scroll.refreshComplete');
 });
};

最后我们整体的控制器是这样的:

.controller('MyCtrl', function($scope, $timeout, PersonService) {
  $scope.items = [];
 
  PersonService.GetFeed().then(function(items){
    $scope.items = items;
  });
 
  $scope.doRefresh = function() {
    PersonService.GetNewUser().then(function(items){
      $scope.items = items.concat($scope.items);
 
      //Stop the ion-refresher from spinning
      $scope.$broadcast('scroll.refreshComplete');
    });
  };
 
});

Conclusion

在你的 Ionic 应用里使用上面的代码(在CodePen的完整代码)你可以完成下拉刷新了。有问题?下面随意发表评论!

来源:理解ionic中的下拉刷新【译】 - Only One

5 回复

点个赞!多来点这样的文章,把ionic社区搞得红红火火!

楼主改天把上拉加载更多也总结一下

请教:如何利用on-pulling 实现显示下拉刷新的时间??目前有延时…

回到顶部