拉动以刷新奇怪的行为

问题描述 投票:0回答:1

我有以下代码

<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上测试过

编辑:我找到了答案

javascript angular cordova pull-to-refresh
1个回答
1
投票

我已经找到答案

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

使用shouldPullToRefresh和属性scrollTop,我们只有在滚动条位于顶部时才能刷新,因此我们可以从底部移动而不会被错误刷新

© www.soinside.com 2019 - 2024. All rights reserved.