In the ordinary doing the project now pull refresh function is very common, then everyone is how to achieve it? The following small series to introduce how to use Ionic implementation page Drop-down Refresh (ion-refresher function, look at it together!)
For specific implementation, please see the following source code:
HTML Code
Ion-refresher: That is to drop the refresh icon;
pulling-text= "Drop-down Refresh" Here the problem can be changed at will, like good;
On-refresh= "Dorefresh ()" This is what we're going to do when we pull, and here's the data to refresh the page.
<body ng-app= "starter" ng-controller= "Actionsheetctl" > <ion-pane> <ion-content > <ion-refresher pulling-text= "Drop-down refresh" on-refresh= "Dorefresh ()" ></ion-refresher> <ion-list> <ion-item ng-repeat= "item in Items" ng-bind= "Item.name" ></ion-item> </ion-list> </ion-content> </ion-pane> </body>
JavaScript Code
$scope. items[] This is the data that the page just came in
Dorefresh () Obviously this is the method that is executed when you want to refresh.
Item.json This is when you click Refresh and we're going to get the new data. This JSON is the most recent data, in which you are going to retrieve the data from the server again and update it to the client.
Angular.module (' starter ', [' Ionic '])
. Run (function ($ionicPlatform) {
$ionicPlatform. Ready (function () {
//Hide the accessory bar by default (remove the accessory bar above the keyboard
//For form inputs )
if (Window.cordova && window.cordova.plugins.Keyboard) {
Cordova.plugins.Keyboard.hideKeyboardAccessoryBar (true);
if (window. StatusBar) {
statusbar.styledefault ();}})
. Controller (' Actionsheetctl ', [' $scope ', ' $timeout ', ' $http ', function ($scope, $timeout, $http) {
$scope. items=[
{'
name ': ' HTML5 '
},
{
' name ': ' JavaScript '
},
{
' name ': ' Css3 '
}
];
$scope. Dorefresh = function () {
//note change to the address of your own site, or there will be a cross-domain problem
$http. Get (' http://www.aliyue.net/demo_source/ Item.json ')
. Success (function (NewItems) {
$scope. Items = NewItems;
})
. Finally (function () {
$scope. $broadcast (' Scroll.refreshcomplete ');
});
};
}]
Item.json File Data:
[
{
' name ': ' Rookie Tutorial '
},
{
' name ': ' Www.aliyue.net '}
]
About Ionic Implementation page Drop-down Refresh (ion-refresher function to introduce you so much, follow-up will also give you introduce ionic how to achieve on the slide load more functions, please continue to pay attention to the cloud habitat community to bring the wonderful content.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
