1、下拉更新数据 : ion-refresher
使用指令 ion-refresher 可以为滚动容器( ion-scroll 或 ion-content)增加 拉动刷新的功能:
ion-refresher 指令有以下可选的属性:
· on-refresh - 当用户向下拉动足够的距离并松开时,执行此表达式
· on-pulling - 当用户开始向下拉动时,执行此表达式
· pulling-text - 当用户向下拉动时,显示此文本
· pulling-icon - 当用户向下拉动时,显示此图标
· refreshing-icon - 当用户向下拉动并松开后,显示的等待图标。 ionic 推荐使用
spinner 代替这个属性
· spinner - 和 refreshing-icon 的作用一样,但 spinner 是基于 SVG 的动画
· disable-pulling-rotation - 禁止下拉图标旋转动画
注意在刷新完毕后,应当使用作用域的$broadcast() 方法通知框架:
scope.
broadcast(“scroll.refreshComplete”);
2、上拉更新数据 : ion-infinite-scroll
使用 ion-infinite-scroll 指令可以为滚动容器( ion-scroll 或 ion-content)增加 滚动刷新功能:
…
ion-infinite-scroll 指令有如下属性:
· on-infinite - 必须。当滚动到底部时执行此表达式
· distance - 可选。距底部距离百分比。当距离底部超过此数值时,执行 on-infinite。默认为 1%
· icon - 可选。载入时显示的图标。默认是 ion-load-d。 ionic 推荐使用 spinner代替 icon 属性
· spinner - 可选。载入时的 spinner。默认是 ionSpinner
· immediate-check - 可选。是否在载入时立即检查滚动框范围
注意在刷新完毕后,应当使用作用域的$broadcast() 方法通知框架:
scope.
broadcast(“scroll.infiniteScrollComplete”);
<!DOCTYPE html>
<html lang="en" ng-app="firstApp">
<head>
<meta charset="utf-8">
<title>ionic css first exercise</title>
<link href="lib/ionic/css/ionic.min.css" rel="stylesheet">
<script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="firstCtrl">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">返回</button>
</div>
<h1 class="title">练习</h1>
<div class="buttons">
<button class="button button-assertive" >菜单</button>
</div>
</ion-header-bar>
<ion-content >
<ion-refresher on-refresh="load_more();" pulling-text="放开就刻意刷新"
spinner="android" >
</ion-refresher>
<h2>spinner 的样式:</h2>
<p>
<ion-spinner icon="android" ></ion-spinner>
<ion-spinner icon="ios"></ion-spinner>
<ion-spinner icon="ios-small"></ion-spinner>
<ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
<ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
</p>
<p>
<ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>
<ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
<ion-spinner icon="lines" class="spinner-calm"></ion-spinner>
<ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>
<ion-spinner icon="spiral"></ion-spinner>
</p>
<ul class="list">
<li class="item" ng-repeat="item in items">{{item}}</li>
</ul>
<ion-infinite-scroll on-infinite="onLoadLess()" distance="10%" immediate-check="true" icon="ion-load-a">
</ion-infinite-scroll>
</ion-content>
</body>
</html>
<script>
angular.module("firstApp",["ionic"])
.controller("firstCtrl",["$scope","$ionicScrollDelegate",
function($scope,$ionicScollDelegate)
{
var base=100;
$scope.items =[];
$scope.load_more = function()
{
console.log("load_more");
for (var i = 0; i < 2; i++, base++)
{
$scope.items.push(["item ", base].join(""));
$scope.$broadcast("scroll.refreshComplete");
}
}
$scope.onLoadLess=function(){
console.log("onLoadLess");
for (var i = 0; i < 2; i++, base++)
{
$scope.items.push(["item ", "liuyonghong"+base].join(""));
$scope.$broadcast("scroll.infiniteScrollComplete");
}
}
}]);
</script>