我有以下代码
<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>
并在 component.ts 内部初始化拉动刷新组件
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();
}
});
如果我向上滑动,效果很好,但我有一个问题,我的 mat-tabs 内的组件是包含太多项目的列表,无法适应屏幕,所以如果我转到页面底部并且我有一个滚动条,即使我在底部,我也会尝试向上滚动页面刷新
知道为什么会发生这种情况吗? -
以防万一,我将 Angular7+ 与 cordova 结合使用。
在 Android 上测试
编辑:我找到了答案
最佳答案
我找到了答案
mainElement: '#loader',
shouldPullToRefresh: () => {return document.getElementById('fincas').scrollTop === 0},
onRefresh: () => {
//onRefresh code
}
});
使用shouldPullToRefresh和属性scrollTop,我们只能在滚动位于顶部时刷新,因此我们可以从底部移动而不会错误刷新
关于javascript - 拉刷新奇怪的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59953566/