160823、ionic上拉/下拉更新数据
2024-10-19 12:48:47
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<title>上拉下拉更新</title>
<script src="lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/css/ionic.min.css">
</head>
<body ng-controller="firstCtrl">
<ion-header-bar class="energized-bg">
<h1 class="title">上拉下拉更新</h1>
</ion-header-bar> <ion-content>
<ion-refresher pulling-text="下拉更新" on-refresh="doDownRefresh()" spinner="lines"></ion-refresher>
<ul class="list">
<li class="item" ng-repeat="item in items">{{item}}</li>
</ul> <ion-infinite-scroll on-infinite="doUpRefresh()" spinner="ripple"></ion-infinite-scroll>
</ion-content>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",function($scope){
$scope.items = ["苹果","香蕉","西瓜"];
var down = 1;
var up = 1;
//下拉更新
$scope.doDownRefresh = function() {
for(var i=0;i<2;i++,down++)
$scope.items.unshift(["item ",down].join(""));
$scope.$broadcast("scroll.refreshComplete");
};
//上拉更新
$scope.doUpRefresh = function(){
for(var i=0;i<2;i++,up++){
$scope.items.push(["up",up].join(""));
$scope.$broadcast("scroll.infiniteScrollComplete");
}
}
})
</script>
备注:
spinner可以设定的刷新图片
最新文章
- iOS大神牛人的博客集合
- grunt使用watch和livereload的Gruntfile.js的配置
- android 在应用中切换语言
- iconv 批量修改文件编码
- 源码级分析Android系统启动流程
- Mac OS 安装 Port
- 深入理解QStateMachine与QEventLoop事件循环的联系与区别
- CI 中css样式或者js样式加载不进来的情况
- tomcat环境变量的配置(网上摘,全部验证通过)
- HDU 1081 To The Max(动态规划)
- 转 linux下xargs命令用法详解
- 使用python读取word,写入execl
- aps.net core mvc中使用session
- linux 性能优化
- java的数据类型:基本数据类型和引用数据类型
- CodeForces 516A Drazil and Factorial 动态规划
- [No0000196]一文读懂Java 11的ZGC为何如此高效
- wamp设置本地访问路径为a.com
- 使你的IT职业生涯更上一层楼de14条建议
- 树莓派挂载和卸载U盘或移动硬盘