BY Ajay Singh30 Nov 2021 Edit
WebAtoms - XF.RefreshView

The WebAtoms XF.RefreshView is a container control that lets scrollable content refresh by triggering the pull to refresh. A RefreshView's child must be a scrollable control like ScrollView, CollectionView, or ListView.

What are the properties of XF.RefreshView?
  • command
  • commandParameter
  • isRefreshing
  • refreshColor

command - is executed when a refresh is triggered.

commandParameter - Passing the command parameters.

isRefreshing - is a boolean property, which indicates the current state of the control.

refreshColor - The color of the progress circle that appears during the refresh.

XF.RefreshView Code Sample
<XF.RefreshView
    refreshColor={Colors.orange}
    isRefreshing={Bind.twoWays(() =>
                  this.viewModel.isListRefreshing)}
   command={Bind.event(() =>
                     this.viewModel.refresh())}>
       <XF.CollectionView>...</XF.CollectionView>
</XF.RefreshView>

In this article, we have demonstrated how to use the XF.RefreshView control, which refreshes the list or any scrollable content. In this example, we load the movie list using the XF.CollectionView and using a few properties of XF.RefreshView control; explained at the beginning of the article.

The command property is set (as shown in the code snippet) and executed when the user refreshes the content by triggering the pull to refresh. The refresh method executes every time the user refreshes the content.

The refreshColor property facilitates setting the color of the progress circle that appears when we refresh the movie list.

Disabling the XF.RefreshView

There may be instances when it is necessary to disable the pull refresh features of any list or scrollable content. You can disable it by setting XF.RefreshView property isEnabled to false.

Click here to download the complete demo.

BY Ajay Singh
1 Like
LikeCommentSave
LikeCommentSaveShare
1
Categories
General
YantraJS
Developer Guides
Tutorials
Web Atoms Updates

POPULAR POSTS
17 Mar 2021
LATEST ACTIVITY
Shubham Khare
liked this post.
Simmi Kava
liked this post.
Show more
ARCHIVES
2022
2021
2020
2019
TAGS
javascript (54)
developer (25)
javascriptdeveloper (16)
Xamarin.Forms (16)
webatoms (12)
typescript (11)
xamarin (11)
coding (10)
Html (10)
arrays (9)
android (8)
web-atoms (8)
csharp (7)
dotnet (7)
javascript-developer (6)
update (6)
dotnet-standard (5)
function (5)
iOS (5)
css (4)
methods (4)




Web Atoms: JSX (TSX + TypeScript) for Xamarin.Forms, Hot Reload Your App in Production Environment

PlaygroundSamples Repository