本文主要是介绍ionic学习笔记3，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
ion-content
ionic 下拉刷新
在加载新数据的时候，我们需要实现下拉刷新效果
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><title>ion-content</title><link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet"><script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script><script type="text/javascript">angular.module('starter', ['ionic']).run(function($ionicPlatform) {$ionicPlatform.ready(function() {// Hide the accessory bar by default (remove this to show 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() {$http.get('item.json') //注意改为自己本站的地址，不然会有跨域问题.success(function(newItems) {$scope.items = newItems;}).finally(function() {$scope.$broadcast('scroll.refreshComplete');});};}])</script>
</head>
<body ng-app="starter" ng-controller="actionsheetCtl" ><ion-pane><ion-content ><ion-refresher pulling-text="下拉刷新" 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>
</html>
这篇关于ionic学习笔记3的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
