PTR

ionic/components/scroll/pull-to-refresh.scss

@@ -1,8 +1,28 @@
 ion-refresher {
-  position: fixed;
+  position: absolute;
-  display: block;
+  top: -60px;
-  height: 100px;
+  right: 0;
-  width: 100%;
+  left: 0;
-  background-color: red;
+  overflow: hidden;
-  z-index: 0;
+  margin: auto;
+  height: 60px;
+  .refresher {
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    width: 100%;
+    color: #fff;
+    text-align: center;
+
+    font-size: 30px;
+
+    .text-refreshing,
+    .text-pulling {
+      font-size: 16px;
+      line-height: 16px;
+    }
+    &.ionic-refresher-with-text {
+      bottom: 10px;
+    }
+  }
 }

ionic/components/scroll/pull-to-refresh.ts

@@ -18,12 +18,12 @@ export class Refresher {
     this.ele = element.nativeElement;
     this.ele.classList.add('content');
 
+    this.content = content;
+
     this.refresh = new EventEmitter('refresh');
 
     setTimeout(() => {
-      content.scrollElement.addEventListener('scroll', function(e) {
+      this.initEvents();
-        console.log('CONTENT: scroll', e.target.scrollTop);
-      });
     }, 1000);
   }
 
@@ -33,4 +33,32 @@ export class Refresher {
       amt: 0
     });
   }
+
+  initEvents() {
+
+    let sp = this.content;
+    let sc = this.content.scrollElement;
+
+    sc.addEventListener('touchmove', this._handleTouchMove);
+    sc.addEventListener('touchend', this._handleTouchEnd);
+    sc.addEventListener('scroll', this._handleScroll);
+  }
+
+  onDehydrate() {
+    console.log('DEHYDRATION');
+    let sc = this.content.scrollElement;
+    sc.removeEventListener('touchmove', this._handleTouchMove);
+    sc.removeEventListener('touchend', this._handleTouchEnd);
+    sc.removeEventListener('scroll', this._handleScroll);
+  }
+
+  _handleTouchMove(e) {
+    console.log('TOUCHMOVE', e);
+  }
+  _handleTouchEnd(e) {
+    console.log('TOUCHEND', e);
+  }
+  _handleScroll(e) {
+    console.log('SCROLL', e.target.scrollTop);
+  }
 }