mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
Refresh and refresh callback on content directive
This commit is contained in:
3
dist/css/ionic.css
vendored
3
dist/css/ionic.css
vendored
@ -2324,7 +2324,8 @@ body, .ionic-body {
|
|||||||
.scroll-refresher-content {
|
.scroll-refresher-content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center; }
|
text-align: center;
|
||||||
|
position: relative; }
|
||||||
|
|
||||||
.scroll-refreshing {
|
.scroll-refreshing {
|
||||||
-webkit-transition: height 0.1s ease-in-out; }
|
-webkit-transition: height 0.1s ease-in-out; }
|
||||||
|
|||||||
7
dist/js/ionic-angular.js
vendored
7
dist/js/ionic-angular.js
vendored
@ -487,6 +487,7 @@ angular.module('ionic.ui.content', [])
|
|||||||
replace: true,
|
replace: true,
|
||||||
template: '<div class="scroll-content"><div class="scroll"></div></div>',
|
template: '<div class="scroll-content"><div class="scroll"></div></div>',
|
||||||
transclude: true,
|
transclude: true,
|
||||||
|
scope: true,
|
||||||
compile: function(element, attr, transclude) {
|
compile: function(element, attr, transclude) {
|
||||||
return function($scope, $element, $attr) {
|
return function($scope, $element, $attr) {
|
||||||
var c = $element.eq(0);
|
var c = $element.eq(0);
|
||||||
@ -512,7 +513,10 @@ angular.module('ionic.ui.content', [])
|
|||||||
} else {
|
} else {
|
||||||
// Otherwise, supercharge this baby!
|
// Otherwise, supercharge this baby!
|
||||||
var sv = new ionic.views.Scroll({
|
var sv = new ionic.views.Scroll({
|
||||||
el: $element[0].firstElementChild
|
el: $element[0].firstElementChild,
|
||||||
|
onRefresh: function() {
|
||||||
|
$scope.onRefresh && $scope.onRefresh();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
// Let child scopes access this
|
// Let child scopes access this
|
||||||
$scope.scrollView = sv;
|
$scope.scrollView = sv;
|
||||||
@ -530,7 +534,6 @@ angular.module('ionic.ui.content', [])
|
|||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
replace: true,
|
replace: true,
|
||||||
transclude: true,
|
transclude: true,
|
||||||
scope: true,
|
|
||||||
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
|
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
7
dist/js/ionic.js
vendored
7
dist/js/ionic.js
vendored
@ -2419,6 +2419,7 @@ window.ionic = {
|
|||||||
this._refresher.style.display = 'none';
|
this._refresher.style.display = 'none';
|
||||||
} else {
|
} else {
|
||||||
this._isRefresherHidden = false;
|
this._isRefresherHidden = false;
|
||||||
|
this._didTriggerRefresh = false;
|
||||||
this._refresher.style.display = 'block';
|
this._refresher.style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2627,12 +2628,14 @@ window.ionic = {
|
|||||||
_this._refresher.classList.add('scroll-refreshing');
|
_this._refresher.classList.add('scroll-refreshing');
|
||||||
//_this._refresher.style.height = firstChildHeight + 'px';
|
//_this._refresher.style.height = firstChildHeight + 'px';
|
||||||
_this._scrollTo(0, _this._refresherHeight, 100, _this.refreshEasing);
|
_this._scrollTo(0, _this._refresherHeight, 100, _this.refreshEasing);
|
||||||
_this.onRefresh && _this.onRefresh();
|
if(!_this._didTriggerRefresh) {
|
||||||
|
_this.onRefresh && _this.onRefresh();
|
||||||
|
_this._didTriggerRefresh = true;
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
_this._refresher.classList.add('scroll-refreshing');
|
_this._refresher.classList.add('scroll-refreshing');
|
||||||
//_this._refresher.style.height = 0 + 'px';
|
//_this._refresher.style.height = 0 + 'px';
|
||||||
_this._scrollTo(0, 0, _this.refreshEasingTime, _this.refreshEasing);
|
_this._scrollTo(0, 0, _this.refreshEasingTime, _this.refreshEasing);
|
||||||
_this.onRefresh && _this.onRefresh();
|
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
7
js/ext/angular/src/directive/ionicContent.js
vendored
7
js/ext/angular/src/directive/ionicContent.js
vendored
@ -20,6 +20,7 @@ angular.module('ionic.ui.content', [])
|
|||||||
replace: true,
|
replace: true,
|
||||||
template: '<div class="scroll-content"><div class="scroll"></div></div>',
|
template: '<div class="scroll-content"><div class="scroll"></div></div>',
|
||||||
transclude: true,
|
transclude: true,
|
||||||
|
scope: true,
|
||||||
compile: function(element, attr, transclude) {
|
compile: function(element, attr, transclude) {
|
||||||
return function($scope, $element, $attr) {
|
return function($scope, $element, $attr) {
|
||||||
var c = $element.eq(0);
|
var c = $element.eq(0);
|
||||||
@ -45,7 +46,10 @@ angular.module('ionic.ui.content', [])
|
|||||||
} else {
|
} else {
|
||||||
// Otherwise, supercharge this baby!
|
// Otherwise, supercharge this baby!
|
||||||
var sv = new ionic.views.Scroll({
|
var sv = new ionic.views.Scroll({
|
||||||
el: $element[0].firstElementChild
|
el: $element[0].firstElementChild,
|
||||||
|
onRefresh: function() {
|
||||||
|
$scope.onRefresh && $scope.onRefresh();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
// Let child scopes access this
|
// Let child scopes access this
|
||||||
$scope.scrollView = sv;
|
$scope.scrollView = sv;
|
||||||
@ -63,7 +67,6 @@ angular.module('ionic.ui.content', [])
|
|||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
replace: true,
|
replace: true,
|
||||||
transclude: true,
|
transclude: true,
|
||||||
scope: true,
|
|
||||||
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
|
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -42,7 +42,10 @@
|
|||||||
#refresh-content {
|
#refresh-content {
|
||||||
color: #999;
|
color: #999;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 48px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -52,9 +55,11 @@
|
|||||||
<header class="bar bar-header bar-success">
|
<header class="bar bar-header bar-success">
|
||||||
<button class="button"><i class="icon ion-home"></i></button>
|
<button class="button"><i class="icon ion-home"></i></button>
|
||||||
</header>
|
</header>
|
||||||
<content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
|
<content on-refresh="onRefresh()" has-header="true" ng-controller="AppCtrl" class="reveal-animation">
|
||||||
<refresher>
|
<refresher>
|
||||||
Refreshing
|
<div id="refresh-content">
|
||||||
|
<i class="icon ion-ios7-reloading"></i>
|
||||||
|
</div>
|
||||||
</refresher>
|
</refresher>
|
||||||
<ul class="list">
|
<ul class="list">
|
||||||
<li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
|
<li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
|
||||||
@ -73,6 +78,9 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
$scope.what = {};
|
$scope.what = {};
|
||||||
|
$scope.onRefresh = function() {
|
||||||
|
console.log('On refresh');
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -510,6 +510,7 @@
|
|||||||
this._refresher.style.display = 'none';
|
this._refresher.style.display = 'none';
|
||||||
} else {
|
} else {
|
||||||
this._isRefresherHidden = false;
|
this._isRefresherHidden = false;
|
||||||
|
this._didTriggerRefresh = false;
|
||||||
this._refresher.style.display = 'block';
|
this._refresher.style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -718,12 +719,14 @@
|
|||||||
_this._refresher.classList.add('scroll-refreshing');
|
_this._refresher.classList.add('scroll-refreshing');
|
||||||
//_this._refresher.style.height = firstChildHeight + 'px';
|
//_this._refresher.style.height = firstChildHeight + 'px';
|
||||||
_this._scrollTo(0, _this._refresherHeight, 100, _this.refreshEasing);
|
_this._scrollTo(0, _this._refresherHeight, 100, _this.refreshEasing);
|
||||||
_this.onRefresh && _this.onRefresh();
|
if(!_this._didTriggerRefresh) {
|
||||||
|
_this.onRefresh && _this.onRefresh();
|
||||||
|
_this._didTriggerRefresh = true;
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
_this._refresher.classList.add('scroll-refreshing');
|
_this._refresher.classList.add('scroll-refreshing');
|
||||||
//_this._refresher.style.height = 0 + 'px';
|
//_this._refresher.style.height = 0 + 'px';
|
||||||
_this._scrollTo(0, 0, _this.refreshEasingTime, _this.refreshEasing);
|
_this._scrollTo(0, 0, _this.refreshEasingTime, _this.refreshEasing);
|
||||||
_this.onRefresh && _this.onRefresh();
|
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -118,6 +118,7 @@ body, .ionic-body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
//@include display-flex();
|
//@include display-flex();
|
||||||
//@include align-items(center);
|
//@include align-items(center);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user