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 ...
随机推荐
- git 分支管理——多人协作
git 分支管理--多人协作 一般一个项目有一个master主分支,还有一个develop开发分支.主要是在develop分支上协作开发,然后merge合并到master主分支上. 当从远程仓库克隆时 ...
- ZeroMQ API（一） 总序
序 zeromq是一个轻量级的消息库.它扩展了标准的套接字接口,其特性与传统的消息中间件不同,zeromq提供异步消息队列.多消息传递模式.消息过滤(订阅).无缝访问多个传输协议等的抽象. 本系列AP ...
- 环境变量ANDROID_SDK_HOME的作用
默认情况下,开发者创建的AVD(Android Virtual Device)存放在家目录的.android下. 如果是Linux,其路径就是 /home/<your_user_name> ...
- Codeforces刷题计划
Codeforces刷题计划 已完成:-- / -- [Codeforces370E]370E - Summer Reading:构造:(给定某些数,在空白处填数,要求不下降,并且相邻差值<=1 ...
- 51nod 小Z的trie（Trie+广义SAM）
[题目链接] http://www.51nod.com/contest/problem.html#!problemId=1647 [题意] 给定一个n个字符串的Trie,每次询问一个字符串在Trie上 ...
- Python练习-一个简单的生成器
今天我们学习了生成器,怎么理解生成器呢,其实就是使用函数的方式自己建立一个迭代器 # 编辑者:闫龙 #做一个简单的生成器 def EasyGene(*args): #建立一个生成器方法并传递多个参数 ...
- 【译】第十二篇 Integration Services：高级日志记录
本篇文章是Integration Services系列的第十二篇,详细内容请参考原文. 简介在前一篇文章我们配置了SSIS内置日志记录,演示了简单和高级日志配置,保存并查看日志配置,生成自定义日志消息 ...
- 配置子目录Web.config使其消除继承，iis7.0设置路由
iis7.0设置路由 ,url转向,伪静态 <system.webServer> <modules runAllManagedModulesForAllRequests=& ...
- linux快速复制大量小文件方法 nc+tar【转】
1,在需要对大量小文件进行移动或复制时,用cp.mv都会显得很没有效率,可以用tar先压缩再解压缩的方式. 2,在网络环境中传输时,可以再结合nc命令,通过管道和tcp端口进行传输. nc和tar ...
- 认识我们的太阳系(Solar System)
一.初识太阳系 如果太阳是一颗篮球,那么我们的地球是什么?? 如果太阳系里最大的行星:木星是一颗足球,那么我们的地球是什么?? 如果我们的地球是一颗排球,那么其他行星是什么?? 由此,我们可以看到,我 ...