ionic 下拉刷新

最新推荐文章于 2023-03-18 11:49:18 发布

pdw2009

最新推荐文章于 2023-03-18 11:49:18 发布

阅读量1.3k

点赞数

分类专栏： Ionic

本文链接：https://blog.csdn.net/pdw2009/article/details/47832821

版权

Ionic 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

Ionic提供了非常简单的指令来实现下拉刷新。首先，我们需要在列表前加一个标签

<body ng-app="ionicApp">
  <ion-header-bar class="bar-energized">
    <h1 class="title">Pull to Refresh!</h1>
  </ion-header-bar>
  <ion-content ng-controller="TodosCtrl">
    <ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()">
    </ion-refresher>
    <ion-list>
      <ion-item ng-repeat="todo in todos">{{todo.name}}</ion-item>
    </ion-list>     
  </ion-content>

</body>

我们可以定义下拉刷新时显示的字体，以及对应的操作，这里是调用doRefresh();下面我们看一下js里面怎么控制

var app = angular.module('ionicApp', ['ionic'])
 
app.controller('TodosCtrl', function($scope) {
  $scope.todos =  [
    {name: "Do the dishes"},
    {name: "Take out the trash"}
  ]
  
  $scope.doRefresh = function() {
    $scope.todos.unshift({name: 'Incoming todo ' + Date.now()})
    $scope.$broadcast('scroll.refreshComplete');
    $scope.$apply()
  };
  
})

这里我们实现上面标签里的doRefresh来更新数据，注意，在数据更新完成后要$broadcast广播一个scroll.refreshComplete的事件，这个事件是让ion-refresher知道刷新已经完成，可以隐藏自己了