在加载新数据的时候，我们需要实现下拉刷新效果，代码如下：
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. [USACO07FEB]牛的词汇The Cow Lexicon

    https://daniu.luogu.org/problemnew/show/P2875 dp[i]表示前i-1个字符,最少删除多少个 枚举位置i, 如果打算从i开始匹配, 枚举单词j,计算从i开始 ...

  2. matplotlib基础整理

    matplotlib主要从下面几个方面进行整理: 折线图绘制:https://douzujun.github.io/page/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98% ...

  3. android 水波纹效果实现

    1.在drawable文件下,新建seletor,作为button的背景,这里我用的是两个圆角的shape <?xml version="1.0" encoding=&quo ...

  4. 拟牛顿法/Quasi-Newton，DFP算法/Davidon-Fletcher-Powell，及BFGS算法/Broyden-Fletcher-Goldfarb-Shanno

    拟牛顿法/Quasi-Newton,DFP算法/Davidon-Fletcher-Powell,及BFGS算法/Broyden-Fletcher-Goldfarb-Shanno 转载须注明出处:htt ...

  5. python学习笔记2-文件操作

    一.文件操作 #文件操作一定要注意文件指针 f=open('','a+,encoding=utf-8) f.seek(0) #文件指针移到行首 f.tell()#查看文件指针的位置 f.read()# ...

  6. 【整理】HTML5游戏开发学习笔记（1）- 骰子游戏

    <HTML5游戏开发>,该书出版于2011年,似乎有些老,可对于我这样没有开发过游戏的人来说,却比较有吸引力,选择自己感兴趣的方向来学习html5,css3,相信会事半功倍.不过值得注意的 ...

  7. 样式缩写——css技巧（一）

    一.margin和padding缩写 例: .sample-margin1{ margin-top:15px; margin-right:20px; margin-bottom:12px; margi ...

  8. 【leetcode 简单】 第一百一十一题 可怜的小猪

    有1000只水桶,其中有且只有一桶装的含有毒药,其余装的都是水.它们从外观看起来都一样.如果小猪喝了毒药,它会在15分钟内死去. 问题来了,如果需要你在一小时内,弄清楚哪只水桶含有毒药,你最少需要多少 ...

  9. hdu 1004 Let the Balloon Rise（字典树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1004 Let the Balloon Rise Time Limit: 2000/1000 MS (J ...

  10. Activity相关知识点总结

    一.Activity状态 Activity有三种状态:active/running.paused.stopped. 1.active/running状态,在当前屏幕时,即用户可见的Activity,位 ...