浏览代码

Refresh feed

Carsten Porth 6 年之前
父节点
当前提交
7df4b42b85
共有 4 个文件被更改,包括 19 次插入2 次删除
  1. 4 0
      app/src/components/feed/feed.html
  2. 6 1
      app/src/components/feed/feed.ts
  3. 1 1
      app/src/pages/home/home.html
  4. 8 0
      app/src/pages/home/home.ts

+ 4 - 0
app/src/components/feed/feed.html

@@ -1,4 +1,8 @@
 <ion-content fullscreen>
+  <ion-refresher (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content pullingText="Pull to refresh" refreshingText="Refreshing..."></ion-refresher-content>
+  </ion-refresher>
+
   <ion-list>
     <tweet *ngFor="let tweet of data" [data]="tweet"></tweet>
   </ion-list>

+ 6 - 1
app/src/components/feed/feed.ts

@@ -1,4 +1,5 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter } from '@angular/core';
+import { InfiniteScroll, Refresher } from 'ionic-angular';
 
 /**
  * Generated class for the FeedComponent component.
@@ -14,9 +15,13 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 export class FeedComponent {
 
   @Input() data: any[];
+  @Output() onRefresh: EventEmitter<any> = new EventEmitter<any>();
 
   constructor() {
     console.log('Hello FeedComponent Component');
   }
 
+  doRefresh(refresher: Refresher) {
+    this.onRefresh.emit(refresher);
+  }
 }

+ 1 - 1
app/src/pages/home/home.html

@@ -8,5 +8,5 @@
 </ion-header>
 
 <ion-content>
-  <feed [data]="data"></feed>
+  <feed [data]="data" (onRefresh)="doRefresh($event)"></feed>
 </ion-content>

+ 8 - 0
app/src/pages/home/home.ts

@@ -28,4 +28,12 @@ export class HomePage {
       this.data = res.data;
     });
   }
+
+  doRefresh(refresher) {
+    this.twitter.fetchHomeFeed()
+    .then(res => {
+      this.data = res.data;
+      refresher.complete();
+    })
+  }
 }