快捷導(dǎo)航

Ionic實(shí)現(xiàn)頁(yè)面下拉刷新(ion-refresher）功能代碼

更新時(shí)間：2016年06月03日 16:52:49 作者：小月

這篇文章主要介紹了使用Ionic實(shí)現(xiàn)頁(yè)面下拉刷新(ion-refresher）功能的代碼，感興趣的朋友一起看看吧

在平常做項(xiàng)目時(shí)下拉刷新功能非常常見，那么大家都是怎么實(shí)現(xiàn)的呢？下面小編給大家介紹如何使用Ionic實(shí)現(xiàn)頁(yè)面下拉刷新(ion-refresher功能，一起看看看吧！

具體的實(shí)現(xiàn)請(qǐng)看下面的源碼：

HTML 代碼

ion-refresher ：即為下拉刷新的圖標(biāo)；
pulling-text=“下拉刷新” 這里的問(wèn)題可以隨意更換，喜歡就好；
on-refresh=”doRefresh()” 這個(gè)便是當(dāng)下拉的時(shí)候我們要執(zhí)行的方法，這里便是刷新頁(yè)面的數(shù)據(jù)。

<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[ ] 這個(gè)是頁(yè)面剛進(jìn)來(lái)的數(shù)據(jù)
doRefresh () 顯然這個(gè)是當(dāng)你要刷新的時(shí)候所執(zhí)行的方法
item.json 這個(gè)就是當(dāng)你點(diǎn)擊刷新后我們就要從新獲取數(shù)據(jù) 這個(gè)json就是最近的數(shù)據(jù)，項(xiàng)目中就是你要從新從服務(wù)器拿一次數(shù)據(jù)并且更新到客戶端。

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() {
//注意改為自己本站的地址，不然會(huì)有跨域問(wèn)題
$http.get('http://www.aliyue.net/demo_source/item.json') 
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
}])

item.json 文件數(shù)據(jù)：

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

關(guān)于Ionic實(shí)現(xiàn)頁(yè)面下拉刷新(ion-refresher功能就給大家介紹這么多，后續(xù)還會(huì)給大家介紹ionic怎么實(shí)現(xiàn)上滑加載更多的功能，請(qǐng)大家繼續(xù)關(guān)注腳本之家給大家?guī)?lái)的精彩內(nèi)容。

您可能感興趣的文章: