16

Is it possible to implement Ionic's pull to refresh (aka "Refresher") inside of an element instead of on an entire page?

This would be useful when designing an app that has a smaller scrollable section within a page. With the current behavior, the entire page is pulled down rather than just the scrollable element.

Improve this question

4 Answers 4

Reset to default
7

Actually you can do this, but it is more a workaround than a really nice solution. ion-refresher components can only be used in ion-content.

So you are able to put another ion-content in your page.

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

You need to put every ion-refresher into a new ion-content, because the ion-refresher component will be put at the end of the scroll-content container, that is generated in ion-content.

Just note, that you wont be able to use a full page ion-refresher with an in page ion-refresher, because both will be executed, when you try to pull the in page ion-refresher:

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

    <!-- Your other content -->

    <ion-content>
        <ion-refresher></ion-refresher>
    </ion-content>
</ion-content>
Improve this answer
7
+50

You can do by using ion-scroll. The sample code given below:

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

Also please check the image, only blue content portion will be under ion-refresher. Other section will be outside the refresher.

enter image description here

Improve this answer
5
  • 2
    ion-scroll is not a known element in Ionic 4. Seems like ion-refresher only work within ion-content. But having ion-content inside another ion-content seems to disturb the layout, causing no content being displayed.
    – Sem
    Commented May 29, 2019 at 12:34
  • @Sem, the question is tagged under ionic2 and ionic3, its not for ionic4.
    – I. Ahmed
    Commented May 30, 2019 at 0:43
  • Ok, but is there any solution for Ionic 4?? I can't believe we can't decide which element is the parent yet :|
    – Jahrenski
    Commented Jan 9, 2020 at 18:32
  • @Jahrenski, I can't understand your requirements. Please explain more clearly.
    – I. Ahmed
    Commented Jan 10, 2020 at 8:44
  • @I. Ahmed, if we could set an input value to the Ionic 4's ion-refresher to a custom parent element (such as a div) instead of ion-content, all of this would be fixed.
    – Jahrenski
    Commented Jan 13, 2020 at 20:59
3

Do you mean something like this?

<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>
Improve this answer
3

Have you tried ion-scroll inside ion-content in your section and put the refresher inside ?

Improve this answer
1
  • check solutions above, there a using this
    – Twen
    Commented Jan 16, 2018 at 8:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.