Home > Developer > JavaScript
Ionic implementation page drop-down refresher code, ionicion-refresher
It is very common to pull and refresh functions in normal projects. How do we achieve this? The following small series will show you how to use Ionic to implement page pull-down refresh (ion-refresher function, let's take a look!
For specific implementation, see the following source code:
HTML code
Ion-refresher: the refresh icon from the drop-down list;
Pulling-text = "pull-down refresh" the problem can be changed at will, just like it;
On-refresh = "doRefresh ()" is the method to be executed when the drop-down is performed. Here we refresh the page data.
<Body ng-app = "starter" ng-controller = "actionsheetCtl"> <ion-pane> <ion-content> <ion-refresher pulling-text = "pull-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 just comes in on the page.
DoRefresh () apparently this is the method that is executed when you want to refresh
Item. json: After you click Refresh, We need to retrieve the data again. json is the latest data. In the project, you need to retrieve the data from the server and update the data to the client.
Angular. module ('starter', ['ionic ']). run (function ($ ionicPlatform) {$ ionicPlatform. ready (function () {// Hide the accessory bar by default (remove this to show the accessory bar abve 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 () {// change the address of your website. Otherwise, there will be a cross-origin 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": "cainiao tutorial" },{ "name": "www.aliyue.net"}]
For more information about Ionic implementation page drop-down refresher (ion-refresher function is described here. We will also introduce how ionic implements slide loading of more functions in the future, please continue to pay attention to the highlights brought by the customer's home.
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
