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.
The Refresher provides pull-to-refresh functionality on a content component. Place the ion-refresher as the first child of your ion-content element. Pages can then listen to the refresher's various output events. The refresh output event is fired when the user has pulled down far enough to kick off the refreshing process.
In the Ionic framework, we can easily implement the page refresher functionally by adding the combination of ion-refresher and ion-refresher-content components. Let’s implement and discuss all configuration by building a real example application 4) How to Change Spinner Icon to Pull Refresh?
The Refresher provides pull-to-refresh functionality on a content component. Place the ion-refresher as the first child of your ion-content element. Pages can then listen to the refresher's various output events.
Ionic 4 | Pull to Refresh functionality in Ionic 4.x Application. As seen in many Android native applications like chrome browser we usually have a user-friendly feature pull to refresh. A user just pulls or simply drag page down to some limit then, the current view is automatically got a refresh.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With