Question

任何人都知道是否有办法从控制器的离子复习器触发刷新动画？

我想通过复习旋转来启动页面

我尝试使用$ionicScrollDelegate.scrollBottom()模拟拉动作，并在复习中设置delegate-handle并从$ionicScrollDelegate.$getByHandle('scroll').scrollBottom()调用滚动但没有成功。

有什么想法吗？

提前致谢！

Answer 1

我终于为此创建了自己的指令如果有人想要实现相同的目标，我就会分享它。

<强> loadingDirective.js

angular.module('app')
.directive('loadingDirective', ['$compile', function($compile) {
  'use strict';

  var loadingTemplate = '<div class="loading-directive"><i class="icon ion-loading-d" /></div>';

  var _linker = function(scope, element, attrs) {
    element.html(loadingTemplate);
    $compile(element.contents())(scope);

    scope.$on('loading.hide', function() {
      element.addClass('closing');
    });
    scope.$on('loading.show', function() {
      element.removeClass('closing');
    });
  };

  return {
    restrict: 'E',
    link: _linker,
    scope: {
      content: '='
    }
  };
}]);

<强> loadingDirective.sass

loading-directive {
  width: 100%;
  font-size: 30px;
  text-align: center;
  color: $scroll-refresh-icon-color;
  padding: 20px 0 10px 0;

  height: 60px;
  display: block;


  @include transition(height, padding .2s);

  .loading-directive {
    -webkit-transform: scale(1,1);
    transform: scale(1,1);

    @include transition(transform .2s);
    @include transition(-webkit-transform .2s);
  }

  &.closing {
    height: 0px;
    padding: 0px;

    .loading-directive {
      -webkit-transform: scale(0,0);
      transform: scale(0,0);
    }
  }

  i {
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    animation-duration: 1.5s;
  }
}

要在模板中使用它，只需在内容的开头添加<loading-directive>标记：

<强> template.html

<ion-view>
  <ion-content>
    <loading-directive></loading-directive>
    <ion-refresher ng-if="refresherActive" pulling-text="Pull to refresh" on-refresh="refreshData()">
    <ion-list></ion-list>
  </ion-content>
</ion-view>

加载视图时将显示加载，直到触发关闭事件在控制器中，$scope.$broadcast('loading.hide')将关闭加载图标，$scope.$broadcast('loading.show')将再次显示

Answer 2

您可以直接使用ion-spinner指令。下拉后，Ionic的pull-to-refresh显示ion-spinner指令。

HTML：

<ion-spinner ng-if="isLoading"></ion-spinner>

JS：

（在您的控制器中......）

$scope.isLoading = true;

myFetchDataFunction().then(function() {
  $scope.isLoading = false;
});

Answer 3

无法使用Ionic的API触发刷新。刷新组件通过滚动超出滚动区域（开始暴露刷新器）来工作，这是用户下拉时必须执行的操作。

最好的办法是显示其他界面组件正在加载。

Ionic - 从控制器强制刷新动画

3 个答案: