ionic_refresher列表
孔俊友
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/ionic.css" />
<script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.title {
font-family: "微软雅黑";
font-weight: 100;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">标题</h1>
</ion-header-bar>
<ion-content>
<!--
作者：394356286@qq.com
时间：2017-12-13
描述：下拉刷新
-->
<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()" pulling-icon="img/alert.png"></ion-refresher>
<ul class="list">
<li class="item" ng-repeat="x in names track by $index">{{x}}</li>
</ul>
</ion-content>
<ion-footer-bar class="bar-positive">
<h2 class="title">我是底部</h2>
</ion-footer-bar>
<script type="text/javascript">
var mo = angular.module("myApp", ["ionic"]);
mo.controller("myCtrl", function($scope, $http) {
$scope.names = ['张三', "李四", "王五", "买六"];
$scope.doRefresh = function() {
$http.get("data/data1.json").then(function(req) {
for(var i = 0; i < req.data.length; i++) {
var newName = req.data[i].name;
$scope.names.push(newName);
}
//停止刷新
$scope.$broadcast('scroll.refreshComplete');
}, function(req) {
$scope.names.push("no data!");
//停止刷新
$scope.$broadcast('scroll.refreshComplete');
})/*.finally(function() {
$scope.names.push("no data!1");
$scope.$broadcast('scroll.refreshComplete');
})*/;
}
})
</script>
</body>
</html>
类似资料：