Ionic实现页面下拉刷新(ion-refresher)功能代码欧洲杯买球下注盘口

Ionic完成页面下拉刷新(ion-refresher)功用代码,ionicion-refresher

在平凡做项目时下拉刷新职能极度普及,那么我们都以怎么得以实现的啊?下边作者给大家介绍怎样行使Ionic完毕页面下拉刷新(ion-refresher作用,一同看看看呢!

欧洲杯买球下注盘口 1

切实的实现请看下边包车型大巴源码:

HTML 代码

ion-refresher : 即为下拉刷新的Logo;
pulling-text=“下拉刷新” 这里的主题材料能够随性所欲退换,喜欢就好;
on-refresh=”doRefresh()”
那些正是当下拉的时候大家要施行的办法,这里就是刷新页面包车型客车数据。

<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 代码

$scope.items[ ] 那些是页面刚步入的数码
doRefresh () 鲜明这一个是当您要刷新的时候所实践的不二诀窍
item.json 这么些正是当你点击刷新后我们将要从新获得数据
这一个json正是多年来的多寡,项目中就是你要从新从服务器拿一遍数据同不经常候更新到顾客端。

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.aliyue.net/demo_source/item.json') 
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
}])

item.json 文件数量:

[
{
"name":"菜鸟教程"
},
{
"name":"www.aliyue.net" } 
]

关于Ionic实现页面下拉刷新(ion-refresher作用就给大家介绍这么多,后续还或然会给大家介绍ionic怎么落到实处上海滑稽剧团加载更加多的作用,请我们持续关心帮客之家给大家带来的美貌内容。

在平凡做项目时下拉刷新效用特别遍布,那么我们都是怎么落实的呢?上面小…

在平凡做项目时下拉刷新功能特别广泛,那么大家都以怎么落到实处的啊?下边笔者给我们介绍如何使用Ionic完毕页面下拉刷新(ion-refresher作用,一同看看看呢!

欧洲杯买球下注盘口 2欧洲杯买球下注盘口

切切实实的落成请看下边包车型大巴源码:

HTML 代码

ion-refresher : 即为下拉刷新的Logo;
pulling-text=“下拉刷新” 这里的难题能够轻巧转变,喜欢就好;
on-refresh=”doRefresh()”
这些正是当下拉的时候大家要实行的方式,这里就是刷新页面包车型大巴数额。

<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 代码

$scope.items[ ] 那几个是页面刚进来的数据
doRefresh () 显著那些是当您要刷新的时候所实施的章程
item.json 这么些正是当你点击刷新后大家将在从新获得数据
那么些json便是近年的数量,项目中正是你要从新从服务器拿二遍数据同期更新到顾客端。

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.aliyue.net/demo_source/item.json') 
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
}])

item.json 文件数量:

[
{
"name":"菜鸟教程"
},
{
"name":"www.aliyue.net" } 
]

关于Ionic达成页面下拉刷新(ion-refresher功效就给大家介绍这么多,后续还有只怕会给大家介绍ionic怎么落实上海滑稽剧团加载更加的多的效率,请大家继续眷评释本之家给我们带来的赏心悦目内容。

你只怕感兴趣的篇章:

  • ionic达成下拉刷新载入数据成效
  • Ionic如何贯彻下拉刷新与上拉加载功效
  • 依靠ionic实现下拉刷新成效

相关文章