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.

Sampath
  • 63,341
  • 64
  • 307
  • 441
Tyler
  • 3,616
  • 3
  • 22
  • 34

4 Answers4

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>
Stephan Strate
  • 1,401
  • 1
  • 12
  • 15
7

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

I. Ahmed
  • 2,438
  • 1
  • 12
  • 29
  • 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 May 29 '19 at 12:34
  • @Sem, the question is tagged under ionic2 and ionic3, its not for ionic4. – I. Ahmed May 30 '19 at 00: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 Jan 09 '20 at 18:32
  • @Jahrenski, I can't understand your requirements. Please explain more clearly. – I. Ahmed Jan 10 '20 at 08: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 Jan 13 '20 at 20:59
3

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

I. Ahmed
  • 2,438
  • 1
  • 12
  • 29
Twen
  • 302
  • 2
  • 6
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>
Alex Pappas
  • 2,377
  • 3
  • 24
  • 48