在加载新数据的时候，我们需要实现下拉刷新效果，代码如下：
HTML 代码

  1. <body ng-app="starter" ng-controller="actionsheetCtl" >
  2.     <ion-pane>
  3.         <ion-content >
  4.             <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
  5.             <ion-list>
  6.                 <ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
  7.             </ion-list>
  8.         </ion-content>
  9.     </ion-pane>
  10. </body>

JavaScript 代码

  1. angular.module('starter', ['ionic'])
  2.  
  3. .run(function($ionicPlatform) {
  4.   $ionicPlatform.ready(function() {
  5.     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
  6.     // for form inputs)
  7.     if(window.cordova && window.cordova.plugins.Keyboard) {
  8.       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  9.     }
  10.     if(window.StatusBar) {
  11.       StatusBar.styleDefault();
  12.     }
  13.   });
  14. })
  15.  
  16. .controller( 'actionsheetCtl',['$scope','$timeout' ,'$http',function($scope,$timeout,$http){
  17.  
  18.     $scope.items=[
  19.         {
  20.             "name":"HTML5"
  21.         },
  22.         {
  23.             "name":"JavaScript"
  24.         },
  25.         {
  26.             "name":"Css3"
  27.         }
  28.     ];
  29.  
  30.     $scope.doRefresh = function() {
  31.         $http.get('http://blog.quickcodes.net/try/demo_source/item.json')  //注意改为自己本站的地址，不然会有跨域问题
  32.             .success(function(newItems) {
  33.                 $scope.items = newItems;
  34.             })
  35.             .finally(function() {
  36.                 $scope.$broadcast('scroll.refreshComplete');
  37.             });
  38.     };
  39. }])

item.json 文件数据：

  1. [
  2.     {
  3.         "name":"App快速开发"
  4.     },
  5.     {
  6.         "name":"blog.quickcodes.net"
  7.     }
  8. ]



Ionic Js三：下拉刷新的更多相关文章

  1. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  2. 基于iscroll.js实现下拉刷新和上拉加载特效

    现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...

  3. js的下拉刷新和上拉加载，基于iScroll v4.2.5

    html部分 <div id="wrapper" style="height: 100%"> <div id="scroller&q ...

  4. 使用mui.js实现下拉刷新

    闲聊: 最近因公司项目需求,小颖需要写一些html5页面,方便公司IOS和Android给APP中嵌套使用,其中需要实现拉下刷新功能,其实就是调用了一下mui.js就可以啦嘻嘻,下面跟着小颖一起来看看 ...

  5. 原生js模仿下拉刷新功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 手机端原生js实现下拉刷新数据

    HTML结构如下: <div class="outerScroller comment"> <div class='scroll comment'> < ...

  7. 原生JS实现下拉刷新

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  8. 使用jquery结合ajax做下拉刷新页面，上拉加载页面，俗称分页

    jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...

  9. 【转载】 ionic 的 下拉刷新 与 上拉加载

    这篇文章是讲解 Ioinc中怎么实现 下拉刷新和上拉加载的.也是我们日常做项目是必不可少的功能.有兴趣的小伙伴可以来学习一下. 更多关于 IONIC 的资源: http://www.aliyue.ne ...

随机推荐

  1. Spring MVC处理响应的 header

    我们经常需要在HttpResponse中设置一些headers,我们使用Spring MVC框架的时候我们如何给Response设置Header呢? So easy, 看下面的代码: @Request ...

  2. 【学习笔记】初识FreeMarker简单使用

    楔子: 之前在和同事讨论,同事说“jsp技术太古老了,有几种页面技术代替,比如FreeMarker.Velocity.thymeleaf,jsp快废弃了……”云云.我这一听有点心虚……我在后端部分越刨 ...

  3. An Insight to References in C++

    ［An Insight to References in C++］ 引用的本质是常指针.占用的内存和指针一样. 参考:http://www.codeproject.com/Articles/13363 ...

  4. HTML5新增的本地存储功能(笔记)

    HTML5新增的本地存储功能分为两种,分别对应两个JS对象:①本地存储对应localStorage对象,主要用于长期保存整个网站的数据(这些数据可以永久保存在客户端电脑硬盘内).②会话存储对应sess ...

  5. 【CodeForces】700 D. Huffman Coding on Segment 哈夫曼树+莫队+分块

    [题目]D. Huffman Coding on Segment [题意]给定n个数字,m次询问区间[l,r]的数字的哈夫曼编码总长.1<=n,m,ai<=10^5. [算法]哈夫曼树+莫 ...

  6. Android笔记之广播

    为了容易理解,可以将广播代入到事件模型中,发送广播消息看做是触发event,BroadcastReceiver是处理事件的回调逻辑. 广播这种模型中涉及到两个角色,就是广播的发送者和接收者,所以会涉及 ...

  7. NodeJS让前端与后端更友好的分手

    学问   最近“上层建筑”在兴起国学热,所以公司几个月前决定开发一款名叫“学问”的有关于国学的app.     APP的详情页面还是由web来显现具体内容,有些类似于新闻页,图文混排什么的web是最适 ...

  8. 排序算法的java实现

    冒泡.选择就不写了.很常见 一:插入排序: /** * 插入排序 */ public class P4_3 { static void insertSort(int[] a){ int j,t; /* ...

  9. 我应该记录一下我不太了解的一些c语言函数

    当然,现在还不分类 fmemopen getpagesize()

  10. linux shell语言编程规范安全篇之通用原则【转】

    shell语言编程规范安全篇是针对bash语言编程中的数据校验.加密与解密.脚本执行.目录&文件操作等方面,描述可能导致安全漏洞或风险的常见编码错误.该规范基于业界最佳实践,并总结了公司内部的 ...