有些項目都用到了下拉更新頁面的效果;

1. 在index.html 中添加ion-refresher 指令 且在我們需要更新內容的外面 添加 如

<ion-refresher pulling-text=" pull to reflesh" on-refresh="doReFresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="list in lists">{{list.name}}</ion-item>
</ion-list>

 <ion-refresher></ion-refresh> 指令中 pulling-text 屬性就是我們在下拉時顯示的文字, on-refresh 用於處理下拉時我們的數據處理 的函數(向服務器請求數據 ,添加新的內容)

2. 添加控制器   <ion-content ng-controller="refleshCtr">

3. 在app.js 中控制器的

 .controller("refleshCtr",function($scope){
$scope.lists=[
{name:"list1"},
{name:"list2"}
]
$scope.doReFresh=function(){
$scope.lists.unshift({name:"pull to refresh add list3"});
$scope.$broadcast('scroll.refreshComplete');
$scope.$apple()
}
})

定義了數組lists  ;下拉時調用doReFresh函數 ,$scope.lists.unshift({name:"pull to refresh add list3"}); 向數組插入了一條數據;

注意:

$scope.$broadcast('scroll.refreshComplete'); // 廣播下拉更新完成   使list 數組可以正常使用
$scope.$apple()//在頁面中顯示

ionic pull to refresh 下拉更新頁面的更多相关文章

  1. Ultra Pull To Refresh下拉刷新

    http://www.jcodecraeer.com/a/opensource/2014/1205/2111.html

  2. 160823、ionic上拉/下拉更新数据

    <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF- ...

  3. ListView 下拉更新 (支持 Android)

    注意:XE7 已提供下拉更的功能. 说明:展示如何在 Android 平台下,使用 ListView 下拉更新. 适用:Delphi XE5 , XE6 修改:需要修改到 Delphi 源码 FMX. ...

  4. 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识

    下拉更新.分享.阅读标识 本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一 ...

  5. Ionic Js三:下拉刷新

    在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: HTML 代码 <body ng-app="starter" ng-controller="actions ...

  6. ion-refresher 下拉更新数据

    使用指令ion-refresher可以为容器eg:ion-scroll 和 ion-content进行拉动刷新 <ion-scroll> <ion-refresher on-refr ...

  7. tableView header Refresh 下拉刷新/上拉加载

    一. UIScrollView 的分类 //作为入口 #import <UIKit/UIKit.h> #import "RefreshHeader.h" #import ...

  8. Ionic4.x ion-refresher 下拉更新

    官方文档:https://ionicframework.com/docs/api/refresher <ion-header> <ion-toolbar> <ion-ti ...

  9. 下拉更新列表Android-PullToRefresh

    项目地址:https://github.com/chrisbanes/Android-PullToRefresh

随机推荐

  1. PLSQL_性能优化系列03_Oracle Parallel并发处理

    2014-09-25 Created By BaoXinjian

  2. Report_报表中Ref Cursor数据源的概念和用法(案例)

    2014-06-22 Created By BaoXinjian

  3. Codeforces Round #367 (Div. 2) Hard problem

    Hard problem 题意: 有n个字符串,对第i个字符串进行反转操作代价为ci. 要使n个字符串按照字典序从小到大排列,最小的代价是多少. 题解: 反转就是reverse操作,比如说45873反 ...

  4. 【转】Action 、 RenderAction 、 Partial 、 RenderPartial 区别

    1.Action . RenderAction Action 方法以字符串的形式返回子视图,可以直接被呈现.RenderAction方法在适当的地方呈现子视图. //One alternative ( ...

  5. Java 查看死锁的方法

    那我们怎么确定一定是死锁呢?有两种方法. 1>使用JDK给我们的的工具JConsole,可以通过打开cmd然后输入jconsole打开. 1)连接到需要查看的进程.

  6. AD按键-矩阵按键:

    原理:利用数组分压+AD采集: 优点:一个IO口可以做成多个按键,节省IO口(矩阵键盘在>4时优点才能体现出来):可备用作为AD基准输入. 缺点:不能做成组合按键(或者电阻要精确选择):且离IO ...

  7. 基于HTML5的多张图片上传

    图片上传之前也有写过demo,不过是单张上传的,最近有个业务需求是需要多张上传的,于是乎从新改写了一下 HTML结构: 1 2 3 4 <div class="container&qu ...

  8. Weblogic重启(转载)

    1.用户名密码登录. 2.切换到weblogic的bin目录下: cd /user/local/weblogic/user_projects/domains/base_domain/bin/ 3.先停 ...

  9. IceGrid负载均衡部署 z

    [IceGrid负载均衡部署步骤]1.环境主机1:IP=192.168.0.239,上面部署注册表服务器registry和节点node1,registry和node1运行在同一进程中:主机2:IP=1 ...

  10. Dapper.NET使用(转)

    Dapper.NET使用 本文目录 Dapper.NET使用 1.为什么选择Dapper 2.以Dapper(4.0)为例. 2.1 在数据库中建立几张表. 2.2实体类. 3.使用方法 3.1  一 ...