ionic 下拉刷新
在載入新數據的時候，我們需要實現下拉刷新效果，代碼如下：
實例
HTML 代碼
<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>
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("http://www.runoob.com/try/demo_source/item.json") //注意改為自己本站的地址，不然會有跨域問題
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
$scope.$broadcast("scroll.refreshComplete");
});
};}])
item.json 文件數據：
[
{
"name":"菜鳥教程"
},
{
"name":"www.runoob.com"
}]
TAG:程序員小新人學習 |