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

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. c++builder6.0 mdi窗体+自定义子窗体

  2. PLSQL_性能优化系列18_Oracle Explain Plan解析计划通过Baseline绑定

    2015-05-28 Created By BaoXinjian

  3. Workflow_工作流发送Document和Form链接的实现(案例)

    2014-06-01 Created By BaoXinjian

  4. RN项目搭建

    一.安装JDK 由安装包引起,你可以尝试一下新包 注意安装路径要不同 或者重新安装Windows Installer 运行CMD 1.输入 sfc /SCANNOW 回车 2.完成后输入 msiexe ...

  5. C++模板元编程 - 3 逻辑结构,递归,一点列表的零碎,一点SFINAE

    本来想把scanr,foldr什么的都写了的,一想太麻烦了,就算了,模板元编程差不多也该结束了,离开学还有10天,之前几天部门还要纳新什么的,写不了几天代码了,所以赶紧把这个结束掉,明天继续抄轮子叔的 ...

  6. SharedPreferences实现自动登录记住用户名密码

    最近Android项目需要一个自动登录功能,完成之后,特总结一下,此功能依靠SharedPreferences进行实现.   SharedPreferences简介 SharedPreferences ...

  7. C++ 局部变量的析构

    http://blog.chinaunix.net/uid-52437-id-2108747.html 在一个函数内,申明一个局部类变量.则这个变量什么时候析构呢? 并不是在函数退出,释放栈空间时候析 ...

  8. queue 与 vector

    优先队列是队列的一种,不过它可以按照自定义的一种方式(数据的优先级)来对队列中的数据进行动态的排序 每次的push和pop操作,队列都会动态的调整,以达到我们预期的方式来存储. 例如:我们常用的操作就 ...

  9. Android开发者需要面对的8大挑战

    移动开发变得越来越受欢迎,但移动开发者正面临着一系列挑战.本文将介绍的是Android开发者需要面对的8个不利因素,例如缺乏硬件标准化,以及软件碎片.为Android OS开发app,给予了开发人员极 ...

  10. iOS使用AVFoundation实现二维码扫描

    原文:http://strivingboy.github.io/blog/2014/11/08/scan-qrcode/ 关于二维码扫描有不少优秀第三方库如: ZBar SDK 里面有详细的文档,相应 ...