在加载新数据的时候，我们需要实现下拉刷新效果，代码如下：
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. COGS 513 八

    513. 八 http://www.cogs.pro/cogs/problem/problem.php?pid=513 ★☆   输入文件:eight.in   输出文件:eight.out   简单 ...

  2. Java并发编程原理与实战二十：线程安全性问题简单总结

    一.出现线程安全性问题的条件 •在多线程的环境下 •必须有共享资源 •对共享资源进行非原子性操作   二.解决线程安全性问题的途径 •synchronized (偏向锁,轻量级锁,重量级锁) •vol ...

  3. [转载]查询json数据结构的8种方式

    http://wangxinghaoaccp.blog.163.com/blog/static/1158102362012111812255980/ 你有没有对“在复杂的JSON数据结构中查找匹配内容 ...

  4. CSS中的选择器(笔记)

    1.通配符选择器(*):通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素.所有浏览器都支持通配符选择器. ;;} .dome *{padding: 2px;} 2.元素选择器(Ele): ...

  5. 【AtCoder Grand Contest 001F】Wide Swap [线段树][拓扑]

    Wide Swap Time Limit: 50 Sec  Memory Limit: 512 MB Description Input Output Sample Input 8 3 4 5 7 8 ...

  6. spring 配置定时任务Scheduled

    一:在spring配置的xml文件添加3条命名空间 xmlns:task="http://www.springframework.org/schema/task" xsi:sche ...

  7. C语言入门教程-(3)基本数据类型

    1.数据类型 在C语言中,数据类型指的是用于声明不同类型的变量或函数的一个广泛的系统.C语言数据类型可以分为四种: 1.基本类型:它们是算术类型,包括两种类型:整数类型和浮点类型. 2.枚举类型:它们 ...

  8. macOS 安装 pcl 1.8.0

    Mac 上的 pcl 一直有问题. 找不到 pcl_viewer 查看 pcd 文件.写个程序用 pcl::visualization::CloudViewer 查看点云,遇到 Runtime Exc ...

  9. HaoZipC不是内部或外部命令

    Win7专业版,32位,HaoZip V3.2 将安装命令下HaoZipC.exe,HaoZip.dll,lang\HaoZipLang_chs.dll三个文件拷贝到C:\Windows\System ...

  10. YUV422(UYVY)转RGB565源代码及其讲解.md

    目录 前言 源码 代码分析 YUV三个分量的关系 循环遍历 结束语 前言 使用zmm220核心板,IFACE102版本的内核等,4300型号的LCD,XC7011_SC1145摄像头,亲测有效. 本文 ...