元素内部的离子拉动刷新（Refresher）

Posted 2023-03-13

【中文标题】元素内部的离子拉动刷新（Refresher）

【英文标题】：Ionic Pull to Refresh (Refresher) Inside an Element

【发布时间】：2018-02-08 11:58:04

【问题描述】：

是否可以在元素内部而不是在整个页面上实现Ionic's pull to refresh (aka "Refresher")？

这在设计页面内具有较小可滚动部分的应用时非常有用。在当前行为下，整个页面被下拉，而不仅仅是可滚动元素。

【参考方案1】：

您是否在您的部分的 ion-content 中尝试过 ion-scroll 并将复习器放入其中？

【讨论】：

检查上面的解决方案，有一个使用这个

【参考方案2】：

您可以使用 ion-scroll 来做到这一点。下面给出的示例代码：

<ion-content>
    <div class="row">
        <p class="col-sm-12">This text will display on top</p>
    </div>

    <div class="row"> 
        <div class="col-sm-6">
            <ion-scroll>
              <ion-refresher>
              </ion-refresher>
              <p class="col-sm-12">This text will be under ion-refresher pull refresh</p>
            </ion-scroll>
        </div>
        <div class="col-sm-6">
            <p class="col-sm-12">This text will display on center right</p>
        </div>    
    </div> 
    <div class="row">
        <p class="col-sm-12">This text will display on bottom</p>
    </div>
<ion-content>

另外请检查图片，只有蓝色内容部分会在离子清新剂下。其他部分将不在复习范围内。

【讨论】：

ion-scroll 不是 Ionic 4 中的已知元素。似乎 ion-refresher 只能在 ion-content 中工作。但是在另一个 ion-content 中包含 ion-content 似乎会扰乱布局，导致不显示任何内容。

@Sem，这个问题被标记在 ionic2 和 ionic3 下，它不适用于 ionic4。

好的，但是 Ionic 4 有什么解决方案吗？我不敢相信我们还不能决定哪个元素是父元素：|

@Jahrenski，我无法理解您的要求。请解释清楚。

@I。 Ahmed，如果我们可以将 Ionic 4 的 ion-refresher 的输入值设置为自定义父元素（例如 div）而不是 ion-content，那么所有这些都将得到修复。

【参考方案3】：

实际上你可以这样做，但它更多的是一种解决方法，而不是一个非常好的解决方案。 ion-refresher 组件只能在ion-content 中使用。

因此您可以在页面中添加另一个ion-content。

<ion-content padding>
    <div>
        <!-- Your other content -->
    </div>

    <!-- Additional ion-content -->
    <ion-content>
        <!-- Your inline ion-refresher -->
        <ion-refresher></ion-refresher>
    </ion-content>
</ion-content>

您需要将每个ion-refresher 放入一个新的ion-content 中，因为ion-refresher 组件将放在scroll-content 容器的末尾，该容器是在ion-content 中生成的。

请注意，您将无法将整页 ion-refresher 与内页 ion-refresher 一起使用，因为当您尝试拉入页 @987654332 时，两者都会被执行@：

<ion-content padding>
    <ion-refresher></ion-refresher>

    <!-- Your other content -->

    <ion-content>
        <ion-refresher></ion-refresher>
    </ion-content>
</ion-content>

【参考方案4】：

你的意思是这样的吗？

<div id='smaller-scrollable-section'>

    <ion-content>

        <ion-refresher (ionRefresh)="doRefresh($event)">
            <ion-refresher-content></ion-refresher-content>
        </ion-refresher>

        <ion-list>
            <ion-item *ngFor="let item of collection">
            </ion-item>
        </ion-list>

        <ion-infinite-scroll (ionInfinite)="fetchMore($event)">
            <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll>

    </ion-content>

</div>