Javatpoint Logo
Javatpoint Logo

Framework7 Refresh / Reload

Refresh or reload is a special component used to refresh (reload) the page contents by pulling it.

Syntax:

Following is a list of classes used in refresh component:

page-content: It has an additional pull-to-refresh-content class and its required to enable pull to refresh.

pull-to-refresh-layer: It is a hidden layer, which is used to pull to refresh visual element and it is just a preloader and an arrow.

data-ptr-distance = "55": This is additional attribute that allows you to set custom 'pull to refresh' trigger distance and its default value is 44px.


Pull to refresh Events

Following is a list of some Pull to Refresh JavaScript events:

Index Event Description Target
1) pullstart It will be triggered whenever you start pulling to refresh content. Pull To Refresh content.
2) pullmove It is triggered when you are pulling to refresh content. Pull To Refresh content.
3) pullend It will be triggered whenever you release pull to refresh content. Pull To Refresh content.
4) refresh This event will be triggered when the pull to refresh enters in the "refreshing" state. Pull To Refresh content.
5) refreshdone It will be triggered after it is refreshed and it goes back to the initial state. This will be done after calling pullToRefreshDone method. Pull To Refresh content.

Following is a list of App's methods that can be used with Pull to Refresh:

Index Method Description
1) myApp.pullToRefreshDone(ptrContent) It is used to reset pull-to-refresh content.
2) myApp.pullToRefreshTrigger(ptrContent) It is used to trigger to refresh on specified pull to refresh content.
3) myApp.destroyPullToRefresh(ptrContent) It is used to destroy/disable pull to refresh on specified pull to refresh content.
4) myApp.initPullToRefresh(ptrContent) It is used to initialize/enable pull to refresh content.

Framework7 Refresh Example

Let's take an example to demonstrate the use of refresh component that initiates the refreshing of a page contents:

Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


B.Tech / MCA