ionic刷新的代码

来源：互联网发布：九阴绝学护盾进阶数据编辑：程序博客网时间：2024/06/07 20:42

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
<link rel="stylesheet" href="css/ionic.css" />
</head>
<body ng-app="myapp" ng-controller="mycr">

<ion-header-bar class="bar-calm">
<h1 class="title">你好啊我来拉别跑啊</h1>
</ion-header-bar>


<ion-content>

<ion-refresher pulling-text="刷新" on-refresh="shuaxin()">

</ion-refresher>

<ul class="list">
<li ng-repeat="x in user track by $index" class="item">{{x}}</li>
</ul>

</ion-content>

</body>
<script>
var app=angular.module("myapp",["ionic"]);

//从网络上加载
app.controller("mycr",function($scope,$http){

$scope.user=["文儿","夏可可","阿哲"];

//刷新时调用此方法
$scope.shuaxin=function(){

//post里买为json文件的路径 then第一个方法为成功第二个为失败
$http.get("dat/data1.json").then(function(req){
//接收数据 data为死格式
var newNames = req.data;
for(var i = 0;i<newNames.length;i++){
//取出数据放到user数组里面
$scope.user.push(newNames[i].name);

}

//停止刷新
$scope.$broadcast('scroll.refreshComplete');

},function(req){

$scope.user.push("失败");
/* //停止刷新
$scope.$broadcast('scroll.refreshComplete');*/

})

}

});

</script>
</html>

阅读全文

0 0