I have the following code
<div id="fincasMaestro" class="page-layout fullwidth page-layout-app p-16" fxFlex fxLayout="column" [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}">
<!-- HEADER -->
<div id="loader" class="h2 text-center mt-4">Parcelas</div>
<mat-tab-group animationDuration="0ms">
<mat-tab label="Activas"> <fincasactivas style="height: 100%"></fincasactivas> </mat-tab>
<mat-tab label="Finalizadas"> <archivedfincas style="height: 100%"> </archivedfincas> </mat-tab>
</mat-tab-group>
and inside the component.ts I initialize the pull to refresh component
const ptr = PullToRefresh.init({
mainElement: '#loader',
instructionsPullToRefresh: 'Arrastre hacia abajo para refrescar',
instructionsReleaseToRefresh: 'Suelte para refrescar',
instructionsRefreshing: 'Refrescando la página',
onRefresh() {
window.location.reload();
}
});
this works fine if I swipe up but I have one problem, the component inside my mat-tabs are lists with too much items to fit the screen, so I have an scroll, if I go to the bottom of the page and I try to scroll up the page refresh even if I'm at the bottom
any idea why is this happening? -
Just in case, I'm using Angular7+ with cordova.
Tested on Android
Edit: I've found the answer
I've found the answer
mainElement: '#loader',
shouldPullToRefresh: () => {return document.getElementById('fincas').scrollTop === 0},
onRefresh: () => {
//onRefresh code
}
});
using shouldPullToRefresh and the property scrollTop we can only refresh if the scroll is at top, so we can move from bottom without refreshing by mistake
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.