ionic 下拉刷新

ionic 下拉刷新

在加载新数据的时候,我们需要实现下拉刷新效果,代码如下:


实例
HTML 代码


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.mscto.com/try/demo_source/item.json') //注意改为自己本站的地址,不然会有跨域问题
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
}])

item.json 文件数据:


[
{
"name":"软件开发网"
},
{
"name":"www.mscto.com"
}
]

效果如下所示:

相关推荐

用异常处理知识解决requests中的ConnectionError

用异常处理知识解决requests中的ConnectionError

React Native 包体积优化实践

React Native 包体积优化实践

在这里插入图片描述

Mac OS 下配置Apache

在这里插入图片描述

PyCharm 中 unitest 添加测试套件后未按照添加顺序执行问题解决方法