<!DOCTYPE html>

<html ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

    <title>上拉下拉更新</title>

    <script src="lib/js/ionic.bundle.min.js"></script>

    <link rel="stylesheet" type="text/css" href="lib/css/ionic.min.css">

</head>

<body ng-controller="firstCtrl">

<ion-header-bar  class="energized-bg">

    <h1 class="title">上拉下拉更新</h1>

</ion-header-bar>

<ion-content>

    <ion-refresher pulling-text="下拉更新" on-refresh="doDownRefresh()" spinner="lines"></ion-refresher>

    <ul class="list">

        <li class="item" ng-repeat="item in items">{{item}}</li>

    </ul>

    <ion-infinite-scroll on-infinite="doUpRefresh()" spinner="ripple"></ion-infinite-scroll>

</ion-content>

</body>

</html>

<script>

    angular.module("myApp",["ionic"])

            .controller("firstCtrl",function($scope){

                $scope.items = ["苹果","香蕉","西瓜"];

                var down = 1;

                var up = 1;

                //下拉更新

                $scope.doDownRefresh = function() {

                    for(var i=0;i<2;i++,down++)

                        $scope.items.unshift(["item ",down].join(""));

                    $scope.$broadcast("scroll.refreshComplete");

                };

                //上拉更新

                $scope.doUpRefresh = function(){

                    for(var i=0;i<2;i++,up++){

                        $scope.items.push(["up",up].join(""));

                        $scope.$broadcast("scroll.infiniteScrollComplete");

                    }

                }

            })

</script>

备注：

spinner可以设定的刷新图片

160823、ionic上拉/下拉更新数据的更多相关文章

  1. [BS-23] AFN网络请求上拉/下拉刷新的细节问题总结

    上拉/下拉刷新的细节问题总结 1.如果导航栏有透明色,则也需要设置header自动改变透明度 self.tableView.mj_header.automaticallyChangeAlpha = Y ...

  2. Swiper 判断上滑下拉操作

    onTouchMove: function(swiper){ //手动滑动中触发//判断上滑下拉var i = mySwiper.translate;setTimeout(function() {va ...

  3. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...

  4. Dcloud课程6 php脚本如何在Linux下定时更新数据

    Dcloud课程6 php脚本如何在Linux下定时更新数据 一.总结 一句话总结:linux下用crontab命令实现定时任务. 1.linux下执行php脚本用什么命令? 直接用php命令php ...

  5. jsp页面上的下拉框案例(Struts2)

    <s:select></s:select>包含的属性有:list=""  :name=""  :value=""   ...

  6. 浅谈对MJRefresh（上）下拉刷新控件的理解

    MJRefresh GitHub地址:https://github.com/CoderMJLee/MJRefresh 利用业余时间研究了一下iOS的开发,发现OC特定的语法方式吸引了我,而且iOS开发 ...

  7. js实现页面的上滑下拉功能

    这两天做项目,用到了上滑和下拉的功能,主要是通过监听touchmove,touchstart,touchend三个事件去判断页面上滑状态还是下拉状态. 同时加一个知识点:有时在监听时会报错,这个错是这 ...

  8. SDI在自定义的工具栏上添加下拉控件

    0.首先到自己的工具条上新建一个控件,并命名新ID 1.拷贝FlatComboBox.h和FlatComboBox.cpp到工程目录下 2.建立新类 class CTrackerToolBar : p ...

  9. 小程序 上啦下拉刷新window配置

    "enablePullDownRefresh": "true"   /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefres ...

随机推荐

  1. C#文本框中默认是不允许使用全选的

    C#文本框中默认是不允许使用全选的.可以通过以下事件完成:  private void textBox1_KeyDown(object sender, KeyEventArgs e) {      i ...

  2. 【微信转载】Google是如何做测试的

    就 目前的软件公司而言,Google无疑是在开放和创新力方面做得最好的.而如何支撑Google这种快速地扩张的研发能力以及迭代速度,并且产品质量总是 一如以往的能给人们很棒的用户体验?这是一个值得我们 ...

  3. 网站相关技术探究keepalive_timeout（转）

    网站相关技术探究keepalive设多少: /proc/$PID/fd/$number  0:标准输入 1:标准输出 2:标准错误   Test: [root@KTQT ~]# ll /proc/12 ...

  4. iOS学习笔记-自定义过渡动画

    代码地址如下:http://www.demodashi.com/demo/11678.html 这篇笔记翻译自raywenderlick网站的过渡动画的一篇文章,原文用的swift,由于考虑到swif ...

  5. Android ListView工作原理全然解析，带你从源代码的角度彻底理解

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/44996879 在Android全部经常使用的原生控件其中.使用方法最复杂的应该就是 ...

  6. web本地存储localStorage和sessionStorage

    用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...

  7. 【C#】重载重写重构

    前言 前几篇博客说了重写和重载.今天主要说重构,顺便比較一下三者. 重构.重写.重载 重构就是通过调整程序代码改善软件的质量.性能,使其程序的设计模式和架构更趋合理.提高软件的扩展性和维护性. 通俗点 ...

  8. Atitit.cateService分类管理新特性与设计文档说明v1

    Atitit.cateService分类管理新特性与设计文档说明v1 1. V2 新特性规划1 2. 分类管理1 3. 分类增加与修改维护2 4. Js控件分类数据绑定2 1. V2 新特性规划 增加 ...

  9. Atitit  文件上传  架构设计 实现机制 解决方案  实践java php c#.net js javascript  c++ python

    Atitit  文件上传  架构设计 实现机制 解决方案  实践java php c#.net js javascript  c++ python 1. 上传的几点要求2 1.1. 本地预览2 1.2 ...

  10. NativeViewer for VS2010

    记得非常久之前公布了一款能够在调试中可视化Mat数据的插件,只是仅仅能用于VS2012及以上.我用的是VS2010(笔记本跑10都卡的不得了,12不敢奢望),不免有些遗憾.非常高兴的say如今这个问题 ...