javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(scroll): memory leak

Browse Source
This commit is contained in:
Manuel Mtz-Almeida
2017-04-08 21:48:21 +02:00
parent 614925d1db
commit 3c8edba0f5
2 changed files with 40 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/scroll/scroll.ts
View File

@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
import { isTrueProperty } from '../../util/util';
import { isTrueProperty, assert } from '../../util/util';
/**
* @name Scroll
@ -22,7 +22,7 @@ import { isTrueProperty } from '../../util/util';
@Component({
selector: 'ion-scroll',
template:
'<div class="scroll-content">' +
'<div class="scroll-content" #scrollContent>' +
'<div class="scroll-zoom-wrapper">' +
'<ng-content></ng-content>' +
'</div>' +
@ -35,6 +35,7 @@ import { isTrueProperty } from '../../util/util';
encapsulation: ViewEncapsulation.None,
})
export class Scroll {
_scrollX: boolean = false;
_scrollY: boolean = false;
_zoom: boolean = false;
@ -92,19 +93,11 @@ export class Scroll {
* @hidden
*/
zoomDuration: number = 250;
/**
* @hidden
*/
scrollElement: HTMLElement;
constructor(private _elementRef: ElementRef) {}
/** @internal */
@ViewChild('scrollContent', { read: ElementRef }) _scrollContent: ElementRef;
/**
* @hidden
*/
ngOnInit() {
this.scrollElement = this._elementRef.nativeElement.children[0];
}
constructor(private _elementRef: ElementRef) { }
/**
* @hidden
@ -114,12 +107,13 @@ export class Scroll {
* undefined if the scroll element doesn't exist.
*/
addScrollEventListener(handler: any) {
if (!this.scrollElement) { return; }
assert(this._scrollContent, 'scroll element is missing');
this.scrollElement.addEventListener('scroll', handler);
const ele = this._scrollContent.nativeElement;
ele.addEventListener('scroll', handler);
return () => {
this.scrollElement.removeEventListener('scroll', handler);
ele.removeEventListener('scroll', handler);
};
}

33
src/components/scroll/test/basic/main.html
View File

@ -11,17 +11,17 @@
<h2>Horizontal</h2>
<ion-scroll scrollX="true" style="height: 200px">
<div style="height: 200px; width: 2500px; background: url('eight_horns.png') repeat"></div>
<div style="height: 200px; width: 2500px;" class="pattern1"></div>
</ion-scroll>
<h2>Vertical</h2>
<ion-scroll scrollY="true" style="width: 200px; height: 500px">
<div style="height: 2500px; width: 200px; background: url('eight_horns.png') repeat"></div>
<div style="height: 2500px; width: 200px;" class="pattern2"></div>
</ion-scroll>
<h2>Both</h2>
<ion-scroll scrollX="true" scrollY="true" style="width: 100%; height: 500px">
<div style="height: 2500px; width: 2500px; background: url('eight_horns.png') repeat"></div>
<ion-scroll scrollX scrollY style="width: 100%; height: 500px">
<div style="height: 2500px; width: 2500px;" class="pattern3"></div>
</ion-scroll>
</ion-content>
@ -38,4 +38,29 @@
background-color: rgba(0,0,0,0.4);
z-index: 5;
}
.pattern1 {
background:
radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
#8a3;
background-size: 20px 20px;
}
.pattern2 {
background:
linear-gradient(63deg, #999 23%, transparent 23%) 7px 0,
linear-gradient(63deg, transparent 74%, #999 78%),
linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%),
#444;
background-size: 16px 48px;
}
.pattern3 {
background:
linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 64px 128px
}
</style>