在加载新数据的时候，我们需要实现下拉刷新效果，代码如下：
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. 2017 清北济南考前刷题Day 1 afternoon

    期望得分:80+30+70=180 实际得分:10+30+70=110 T1 水题(water) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK出了道水 ...

  2. Twitter.com在用哪些Javascript框架？

    我一直在研究 twitter.com 使用的一些 UI 框架.下面是这些框架的清单(大部分是 Javascript 框架).如果你发现有些框架 Twitter 已经没在使用了,请随时告诉我! 测试 J ...

  3. 编程语言BrainkFuck

    BrainFuck由Urban Müller在1993年创建,是经常被吐槽的语言,不过我觉得除了名字其它都还挺正常的,没错我觉得这个语言设计的很正常没有Fuck到我的脑子,大概是因为我根本就没有脑子吧 ...

  4. git之合并分支（git merge）------（三）

    最近几天写小demo,总是自己拉取他人的代码,然后创建分支,在自己的分支上进行修改,然后提交到自己的分支,具体的这一步,我就不多讲了,因为在我的博客“工作中常用的Git操作”中有详细的介绍,今天主要讲 ...

  5. 【方法】jQuery无插件实现 鼠标拖动切换图片/内容 功能

    前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...

  6. hdu 1251 统计难题（字典树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1251 统计难题 Time Limit: 4000/2000 MS (Java/Others)    M ...

  7. 【Eclipse】eclipse生成类图、类交互图、包依赖图

    今天,在修改毕设论文的时候需要画类图,系统已经开发完成,如果手动拿PowerDesigner画类图太浪费时间,于是通过网上查阅资料发现eclipse可以集成一个插件生成类图,也可以生成包图.现在做记录 ...

  8. 【比赛游记】THUSC2018酱油记

    day -1 早上4:30就要起来去飞机场…… 7点的飞机,10:30就到北京了. 北京的街景并没有我想像的漂亮……大概是因为我在四环外〒▽〒 晚上还有CF div3场,果断的去水了,因为太累就没有打 ...

  9. 【杂谈】需要mark的一些东西

    https://riteme.github.io/blog/2017-10-28/oi-coding-guidelines.html https://www.luogu.org/blog/34238/ ...

  10. Wood Cut

    Given n pieces of wood with length L[i] (integer array). Cut them into small pieces to guarantee you ...