拉动刷新奇怪的行为答案

【问题标题】：Pull to refresh strange behaviour拉动刷新奇怪的行为
【发布时间】：2020-01-28 16:55:30
【问题描述】：

我有以下代码

<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内部我初始化了pull to refresh组件

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 一起使用。

在安卓上测试

编辑：我找到了答案

【问题讨论】：

标签： javascript angular cordova pull-to-refresh

【解决方案1】：

我找到了答案

        mainElement: '#loader',
        shouldPullToRefresh: () => {return document.getElementById('fincas').scrollTop === 0},
        onRefresh: () => {
                //onRefresh code 
            }
      });

使用 shouldPullToRefresh 和属性 scrollTop 我们只有在滚动到顶部时才能刷新，所以我们可以从底部移动而不会误刷新

【讨论】：