diff --git a/ionic/components/scroll/pull-to-refresh.scss b/ionic/components/scroll/pull-to-refresh.scss index ca2ba0fc81..c593cb6cf0 100644 --- a/ionic/components/scroll/pull-to-refresh.scss +++ b/ionic/components/scroll/pull-to-refresh.scss @@ -1,8 +1,28 @@ ion-refresher { - position: fixed; - display: block; - height: 100px; - width: 100%; - background-color: red; - z-index: 0; + position: absolute; + top: -60px; + right: 0; + left: 0; + overflow: hidden; + 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; + } + } } diff --git a/ionic/components/scroll/pull-to-refresh.ts b/ionic/components/scroll/pull-to-refresh.ts index f196fe847d..c1c1ffa9e8 100644 --- a/ionic/components/scroll/pull-to-refresh.ts +++ b/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) { - console.log('CONTENT: scroll', e.target.scrollTop); - }); + this.initEvents(); }, 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); + } }