mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 04:53:58 +08:00
refactor(pull-to-refresh): emit starting event and change all events to emit the refresher
Cleaned up the API docs for scroll and test also. References #5207
This commit is contained in:
@ -19,8 +19,8 @@ import {raf, ready, CSS} from '../../util/dom';
|
|||||||
* ```html
|
* ```html
|
||||||
* <ion-content>
|
* <ion-content>
|
||||||
* <ion-refresher (starting)="doStarting()"
|
* <ion-refresher (starting)="doStarting()"
|
||||||
* (refresh)="doRefresh($event, refresher)"
|
* (refresh)="doRefresh($event)"
|
||||||
* (pulling)="doPulling($event, amt)">
|
* (pulling)="doPulling($event)">
|
||||||
* </ion-refresher>
|
* </ion-refresher>
|
||||||
*
|
*
|
||||||
* </ion-content>
|
* </ion-content>
|
||||||
@ -29,23 +29,24 @@ import {raf, ready, CSS} from '../../util/dom';
|
|||||||
*
|
*
|
||||||
* ```ts
|
* ```ts
|
||||||
* export class MyClass {
|
* export class MyClass {
|
||||||
* constructor(){}
|
*
|
||||||
* doRefresh(refresher) {
|
* doRefresh(refresher) {
|
||||||
* console.debug('Refreshing!', refresher);
|
* console.log('Refreshing', refresher)
|
||||||
*
|
*
|
||||||
* setTimeout(() => {
|
* setTimeout(() => {
|
||||||
* console.debug('Pull to refresh complete!', refresher);
|
|
||||||
* refresher.complete();
|
* refresher.complete();
|
||||||
* })
|
* console.log("Complete");
|
||||||
|
* }, 5000);
|
||||||
* }
|
* }
|
||||||
*
|
*
|
||||||
* doStarting() {
|
* doStarting(refresher) {
|
||||||
* console.debug('Pull started!');
|
* console.log('Starting', refresher);
|
||||||
* }
|
* }
|
||||||
*
|
*
|
||||||
* doPulling(amt) {
|
* doPulling(refresher) {
|
||||||
* console.debug('You have pulled', amt);
|
* console.log('Pulling', refresher);
|
||||||
* }
|
* }
|
||||||
|
*
|
||||||
* }
|
* }
|
||||||
* ```
|
* ```
|
||||||
* @demo /docs/v2/demos/refresher/
|
* @demo /docs/v2/demos/refresher/
|
||||||
@ -191,19 +192,19 @@ export class Refresher {
|
|||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @output {any} the methond on your class you want to perform when you are pulling down
|
* @output {event} When you are pulling down
|
||||||
*/
|
*/
|
||||||
@Output() pulling: EventEmitter<any> = new EventEmitter();
|
@Output() pulling: EventEmitter<Refresher> = new EventEmitter();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @output {any} the methond on your class you want to perform when you refreshing
|
* @output {event} When you are refreshing
|
||||||
*/
|
*/
|
||||||
@Output() refresh: EventEmitter<any> = new EventEmitter();
|
@Output() refresh: EventEmitter<Refresher> = new EventEmitter();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @output {any} the methond on your class you want to perform when you start pulling down
|
* @output {event} When you start pulling down
|
||||||
*/
|
*/
|
||||||
@Output() starting: EventEmitter<any> = new EventEmitter();
|
@Output() starting: EventEmitter<Refresher> = new EventEmitter();
|
||||||
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
@ -304,7 +305,7 @@ export class Refresher {
|
|||||||
activate() {
|
activate() {
|
||||||
//this.ele.classList.add('active');
|
//this.ele.classList.add('active');
|
||||||
this.isActive = true;
|
this.isActive = true;
|
||||||
//this.starting.next();
|
this.starting.emit(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -327,7 +328,7 @@ export class Refresher {
|
|||||||
start() {
|
start() {
|
||||||
// startCallback
|
// startCallback
|
||||||
this.isRefreshing = true;
|
this.isRefreshing = true;
|
||||||
this.refresh.next(this);
|
this.refresh.emit(this);
|
||||||
//$scope.$onRefresh();
|
//$scope.$onRefresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -484,8 +485,8 @@ export class Refresher {
|
|||||||
// overscroll according to the user's drag so far
|
// overscroll according to the user's drag so far
|
||||||
this.overscroll( Math.round((this.deltaY - this.dragOffset) / 3) );
|
this.overscroll( Math.round((this.deltaY - this.dragOffset) / 3) );
|
||||||
|
|
||||||
// Pass an incremental pull amount to the EventEmitter
|
// Pass the refresher to the EventEmitter
|
||||||
this.pulling.next(this.lastOverscroll);
|
this.pulling.emit(this);
|
||||||
|
|
||||||
// update the icon accordingly
|
// update the icon accordingly
|
||||||
if (!this.activated && this.lastOverscroll > this.ptrThreshold) {
|
if (!this.activated && this.lastOverscroll > this.ptrThreshold) {
|
||||||
|
@ -5,9 +5,23 @@ import {App} from '../../../../../ionic/ionic';
|
|||||||
templateUrl: 'main.html'
|
templateUrl: 'main.html'
|
||||||
})
|
})
|
||||||
class E2EApp {
|
class E2EApp {
|
||||||
|
items = [];
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
for(let i = 0; i < 20; i++) {
|
||||||
|
this.items.push({ "index": i });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
doRefresh(refresher) {
|
doRefresh(refresher) {
|
||||||
console.log('DOREFRESH', refresher)
|
console.log('Refreshing', refresher)
|
||||||
|
|
||||||
|
// Add to the top of the list on refresh
|
||||||
|
let firstIndex = this.items[0].index - 1;
|
||||||
|
|
||||||
|
for(let i = firstIndex; i > firstIndex - 5; i--) {
|
||||||
|
this.items.unshift({ "index": i });
|
||||||
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
refresher.complete();
|
refresher.complete();
|
||||||
@ -15,11 +29,11 @@ class E2EApp {
|
|||||||
}, 5000);
|
}, 5000);
|
||||||
}
|
}
|
||||||
|
|
||||||
doStarting() {
|
doStarting(refresher) {
|
||||||
console.log('DOSTARTING');
|
console.log('Starting', refresher);
|
||||||
}
|
}
|
||||||
|
|
||||||
doPulling(amt) {
|
doPulling(refresher) {
|
||||||
console.log('DOPULLING', amt);
|
console.log('Pulling', refresher);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,20 +3,16 @@
|
|||||||
<ion-content>
|
<ion-content>
|
||||||
<ion-refresher
|
<ion-refresher
|
||||||
(starting)="doStarting($event)"
|
(starting)="doStarting($event)"
|
||||||
(refresh)="doRefresh($event, refresher)"
|
(refresh)="doRefresh($event)"
|
||||||
(pulling)="doPulling($event, amt)">
|
(pulling)="doPulling($event)"
|
||||||
|
pullingIcon="heart"
|
||||||
|
pullingText="release to refresh..."
|
||||||
|
refreshingIcon="star"
|
||||||
|
refreshingText="refreshing...">
|
||||||
</ion-refresher>
|
</ion-refresher>
|
||||||
<f></f>
|
<ion-list>
|
||||||
<f></f>
|
<ion-item *ngFor="#item of items">
|
||||||
<f></f>
|
Item {{ item.index }}
|
||||||
<f></f>
|
</ion-item>
|
||||||
<f></f>
|
</ion-list>
|
||||||
<f></f>
|
|
||||||
<f></f>
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|
||||||
<style>
|
|
||||||
f {
|
|
||||||
display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
Reference in New Issue
Block a user