在元素内部使用Ionic下拉刷新（Refresher）

Question

是否可以在元素内部实现Ionic的下拉刷新（也称为“Refresher”），而不是在整个页面上实现？

当设计一个在页面内有较小可滚动区域的应用程序时，这将非常有用。当前的行为是，整个页面被拉下来，而不仅仅是可滚动的元素。

- Tyler

Answer 1

实际上，您可以这样做，但这更像是一种变通方法而不是真正的好解决方案。 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组件将被放置在由ion-content生成的scroll-content容器的末尾。

请注意，如果你尝试拉出页面上的ion-refresher，那么页面上的ion-refresher和内部页面的ion-refresher都会被执行，所以你无法使用全页ion-refresher和内部页面ion-refresher。

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

    <!-- Your other content -->

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

- Stephan Strate

Answer 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-refresher下方。其他部分将在刷新器之外。

- I. Ahmed

---

ion-scroll在Ionic 4中不是一个已知的元素。似乎ion-refresher只能在ion-content内部工作。但是，在另一个ion-content中放置ion-content似乎会干扰布局，导致没有内容显示。 - Sem

@Sem，这个问题标签下是ionic2和ionic3，不是针对ionic4的。 - I. Ahmed

好的，但是Ionic 4有没有解决方案？我不敢相信我们还不能确定哪个元素是父级 :| - Jahrenski

@Jahrenski，我无法理解您的要求。请更清楚地解释一下。 - I. Ahmed

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

Answer 3

您是否尝试在您的部分中使用ion-scroll并将刷新器放置在ion-content内？

- Twen

---

请检查上面的解决方案，有人正在使用它们。 - Twen

Answer 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>

- Alex Pappas