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

Ionic - Force refresh animation from controller

本文关键字：刷新 动画 控制器 Ionic-      更新时间：2023-09-26

有人知道是否有办法从控制器的离子刷新器触发刷新动画吗？

我想用复习旋转开始页面

我尝试过用$ionicScrollDelegate.scrollBottom()模拟拉动动作，也尝试过在刷新器中设置delegate-handle，并从那里调用滚动$ionicScrollDelegate.$getByHandle('scroll').scrollBottom()，但没有成功。

有什么想法吗？

提前感谢！

我终于为此创建了自己的指令如果有人希望实现相同的，我会分享它

加载指令.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: '='
    }
  };
}]);

加载指令.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')将再次显示

您可以直接使用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;
});

无法使用Ionic的API触发刷新。刷新组件的工作方式是滚动到滚动区域之外（开始显示刷新器），这是用户在下拉时必须做的事情。

最好的办法是显示加载是通过其他接口组件进行的。

相关文章：