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

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. mvc 控制器,视图,Razor 语法

    mvc 控制器controller:响应用户请求,并修改模型model;输入数据的处理,输出view数据的提供: url入控制器的方法有关联:MVC提供的是方法调用结果: mvc model:是对应用 ...

  2. 两分钟彻底让你明白Android Activity生命周期(图文)!

    大家好,今天给大家详解一下Android中Activity的生命周期,我在前面也曾经讲过这方面的内容,但是像网上大多数文章一样,基本都是翻译Android API,过于笼统,相信大家看了,会有一点点的 ...

  3. win764上vs2010+opencv2.4.11安装配置

    1:准备工作 1)opencv的官网下载你所要版本的opencv库文件,运行安装解压到自定义的一个文件夹里(D:\Program Files). 2)安装vs2010. 二:配置 1.计算机环境变量: ...

  4. suibi 117

    -Djava.net.preferIPv4Stack=true re.findall(r"^(\d+)" , content) content = content.replace( ...

  5. sublime相关设置

    1.设置Sublime Text新标签页打开文件 "open_files_in_new_window": false,

  6. MySQL的时间进位问题

    mysql更新到5.6.4 之后 , 新增了一个叫factional seconds的特性 , 可以记录时间的毫秒值. 但是目前的数据库是不记录毫秒值的 , 所以会产生一个java中时间的Millis ...

  7. ylbtech-Unitity-CS:AnonymousDelegates

    ylbtech-Unitity-CS:AnonymousDelegates 1.A,效果图返回顶部   1.B,源代码返回顶部 1.B.1, using System; using System.Co ...

  8. rubymine配置 rspec

    If you go in Run > Edit Configurations... And select All Specs in <Your Project> you'll see ...

  9. [DataTable] datatable根据表中的字段进行排序

    private DataTable SortTable(DataTable dt,string[] pids) { DataTable dt0 = dt.Clone(); //复制原表结构 ;i< ...

  10. mssqlserver 查询数据库表结构语句

    查询指定表结构的表名.列名.类型.说明.字段长度 select o.name as tableName,c.name as columnName,t.name as columnType,p.valu ...