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