在加载新数据的时候，我们需要实现下拉刷新效果，代码如下：
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三：下拉刷新的更多相关文章

  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. 2016/1/2 Python中的多线程(1)：线程初探

    ---恢复内容开始--- 新年第一篇,继续Python. 先来简单介绍线程和进程. 计算机刚开始发展的时候,程序都是从头到尾独占式地使用所有的内存和硬件资源,每个计算机只能同时跑一个程序.后来引进了一 ...

  2. TPL概要

    ReaderWriterLockSlim.读写锁,允许多个线程同时获取读锁,但同一时间只允许一个线程获得写锁,因此也称作共享-独占锁.只有等到对象被写入锁占用的时候,才会阻塞 Barrier .它允许 ...

  3. JavaScript中函数和构造函数的区别

    构造函数也是函数 构造函数和其它函数的唯一区别: 构造函数是通过new操作符来调用的. 也就是说如果构造函数不用new操作符来调用,那它就是普通函数,反过来说任何函数通过new操作符来调用就可以当做构 ...

  4. [转载]ECMA-262 6th Edition / Draft August 24, 2014 Draft ECMAScript Language Specification

    http://people.mozilla.org/~jorendorff/es6-draft.html#sec-23.4 Draft Report Errors and Issues at: htt ...

  5. 《大型网站SEO优化实践》学习分享

    本文主要内容源自2013年阿里技术嘉年华中阿里巴巴周文君分享<大型网站SEO优化实践>.学习过后,受益匪浅,特作笔记,经常回顾吸收学习. 大型网站SEO的特点&优势&挑战 ...

  6. asp.net 练习 js 调用webservice

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  7. Java容器List接口

    List接口是Java中经常用到的接口,如果对具体的List实现类的特性不了解的话,可能会导致程序性能的下降,下面从原理上简单的介绍List的具体实现: 可以看到,List继承了Collection接 ...

  8. Explorer : 发布一个key-value存储系统，带有客户端和服务器端

    Explorer 一个key-value存储系统,带有客户端和服务器端.使用非常方便. 使用B+树作为存储引擎,客户端和服务器端使用TCP协议进行通信. 代码采用C++实现,底层将客户端和服务器通信封 ...

  9. vs2012 连接oracle11g 及数据的insert及select 的总结

    下载链接Oracle 11g所需的驱动ODTwithODAC1120320_32bit,下载链接为http://www.oracle.com/technetwork/topics/dotnet/uti ...

  10. 关于一些问题的解决办法[记录]TF400017

    这个问题是今天在改东西的时候,突然断电导致的,google了很久之后,终于找到了办法 方法: 就是删除下面这个文件 -========================================= ...