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