有人知道是否有办法从控制器的离子刷新器触发刷新动画吗?
我想用复习旋转开始页面
我尝试过用$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触发刷新。刷新组件的工作方式是滚动到滚动区域之外(开始显示刷新器),这是用户在下拉时必须做的事情。
最好的办法是显示加载是通过其他接口组件进行的。