Ionic Js三：下拉刷新
在加载新数据的时候，我们需要实现下拉刷新效果，代码如下：
HTML 代码
<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 代码
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() {
$http.get('http://blog.quickcodes.net/try/demo_source/item.json') //注意改为自己本站的地址，不然会有跨域问题
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
$scope.$broadcast('scroll.refreshComplete');
});
};
}])
item.json 文件数据：
[
{
"name":"App快速开发"
},
{
"name":"blog.quickcodes.net"
}
]

Ionic Js三：下拉刷新的更多相关文章
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 基于iscroll.js实现下拉刷新和上拉加载特效
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...
- js的下拉刷新和上拉加载，基于iScroll v4.2.5
html部分 <div id="wrapper" style="height: 100%"> <div id="scroller&q ...
- 使用mui.js实现下拉刷新
闲聊: 最近因公司项目需求,小颖需要写一些html5页面,方便公司IOS和Android给APP中嵌套使用,其中需要实现拉下刷新功能,其实就是调用了一下mui.js就可以啦嘻嘻,下面跟着小颖一起来看看 ...
- 原生js模仿下拉刷新功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手机端原生js实现下拉刷新数据
HTML结构如下: <div class="outerScroller comment"> <div class='scroll comment'> < ...
- 原生JS实现下拉刷新
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- 使用jquery结合ajax做下拉刷新页面，上拉加载页面，俗称分页
jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...
- 【转载】 ionic 的 下拉刷新 与 上拉加载
这篇文章是讲解 Ioinc中怎么实现 下拉刷新和上拉加载的.也是我们日常做项目是必不可少的功能.有兴趣的小伙伴可以来学习一下. 更多关于 IONIC 的资源: http://www.aliyue.ne ...
随机推荐
- 《A First Course in Abstract Algebra with Applications》-chaper1-数论-棣莫弗定理
定理1.24 (棣莫弗定理) 对每个实数x和每个正整数n有 基于棣莫弗定理的推论如下:
- 44、File类简介
使用File类创建文件夹 File类在java.io包下,看名字应该可以猜到,这个类是跟文件夹操作有关,下面使用File类中的方法在硬盘中创建文件夹. package com.sutaoyu.file ...
- Memcached与KVDB的区别
Memcached将数据存储在内存中,数据易丢失,不适合对数据进行长期存储. KVDB则是将数据存储在磁盘中,数据安全性级别高,不易丢失.
- 假·最大子段和 (sdutoj 4359 首尾相连)(思维)
题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Contest/contestproblem/cid/2736/pid/4359 具体思 ...
- 20165320 预备作业3 ：Linux安装及命令入门
一.VirtualBox与Linux的安装 我是按照老师给的链接下的最新版本的VirtualBox5.26,然后Ubuntu软件(版本是16.04,最新的是17)是自己在网上找的旧版本下好的,因为我在 ...
- 2015.07.15——prime素数
prime素数 1.素数也叫质数,定义是一个数只能被1和它自身整除. 素数从2开始,0,1都不是素数. 2.素数的判断(C++) 3.给定某个数,求小于这个数的所有素数 2.素数的判断(C++) bo ...
- 【bzoj题解】1008 越狱
题目描述 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱. 输入 输入两个整 ...
- WindowsServer2003双网卡配置
今天突然被问起,找资料10+分钟才找到记录,因此再次记录下: route -p delete 0.0.0.0 route -p add 0.0.0.0 mask 0.0.0.0 58.240.115. ...
- OpenStack Benchmark - Rally
作为以基于OpenStack的云平台的基准测试工具 -- Rally, 其功能不仅是测试云的性能&&稳定性, 还可以安装OpenStack,以及以良好的表现形式(web 页面)展现测试 ...
- 19 Error handling and Go go语言错误处理
Error handling and Go go语言错误处理 12 July 2011 Introduction If you have written any Go code you have pr ...