javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 05:21:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(infinite-scroll): fix scroll listener

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2019-06-27 17:50:13 +02:00
parent 44c88ad908
commit 0d58101edc
1 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
core/src/components/infinite-scroll/infinite-scroll.tsx
View File

@ -29,7 +29,8 @@ export class InfiniteScroll implements ComponentInterface {
@Prop() threshold = '15%'; @Prop() threshold = '15%';
@Watch('threshold') @Watch('threshold')
protected thresholdChanged(val: string) { protected thresholdChanged() {
const val = this.threshold;
if (val.lastIndexOf('%') > -1) { if (val.lastIndexOf('%') > -1) {
this.thrPx = 0; this.thrPx = 0;
this.thrPc = (parseFloat(val) / 100); this.thrPc = (parseFloat(val) / 100);
@ -53,10 +54,12 @@ export class InfiniteScroll implements ComponentInterface {
@Watch('disabled') @Watch('disabled')
protected disabledChanged() { protected disabledChanged() {
if (this.disabled) { const disabled = this.disabled;
if (disabled) {
this.isLoading = false; this.isLoading = false;
this.isBusy = false; this.isBusy = false;
} }
this.enableScrollEvents(!disabled);
} }
/** /**
@ -79,7 +82,8 @@ export class InfiniteScroll implements ComponentInterface {
await contentEl.componentOnReady(); await contentEl.componentOnReady();
this.scrollEl = await contentEl.getScrollElement(); this.scrollEl = await contentEl.getScrollElement();
} }
this.thresholdChanged(this.threshold); this.thresholdChanged();
this.disabledChanged();
if (this.position === 'top') { if (this.position === 'top') {
writeTask(() => { writeTask(() => {
if (this.scrollEl) { if (this.scrollEl) {
@ -90,6 +94,7 @@ export class InfiniteScroll implements ComponentInterface {
} }
componentDidUnload() { componentDidUnload() {
this.enableScrollEvents(false);
this.scrollEl = undefined; this.scrollEl = undefined;
} }
@ -199,16 +204,26 @@ export class InfiniteScroll implements ComponentInterface {
); );
} }
private enableScrollEvents(shouldListen: boolean) {
if (this.scrollEl) {
if (shouldListen) {
this.scrollEl.addEventListener('scroll', this.onScroll);
} else {
this.scrollEl.removeEventListener('scroll', this.onScroll);
}
}
}
render() { render() {
const mode = getIonMode(this); const mode = getIonMode(this);
const disabled = this.disabled;
return ( return (
<Host <Host
class={{ class={{
[mode]: true, [mode]: true,
'infinite-scroll-loading': this.isLoading, 'infinite-scroll-loading': this.isLoading,
'infinite-scroll-enabled': !this.disabled 'infinite-scroll-enabled': !disabled
}} }}
onScroll={this.disabled ? undefined : this.onScroll}
/> />
); );
} }