ionic pull to refresh 下拉更新頁面
有些項目都用到了下拉更新頁面的效果;
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 下拉更新頁面的更多相关文章
- Ultra Pull To Refresh下拉刷新
http://www.jcodecraeer.com/a/opensource/2014/1205/2111.html
- 160823、ionic上拉/下拉更新数据
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF- ...
- ListView 下拉更新 (支持 Android)
注意:XE7 已提供下拉更的功能. 说明:展示如何在 Android 平台下,使用 ListView 下拉更新. 适用:Delphi XE5 , XE6 修改:需要修改到 Delphi 源码 FMX. ...
- 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识
下拉更新.分享.阅读标识 本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一 ...
- Ionic Js三:下拉刷新
在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: HTML 代码 <body ng-app="starter" ng-controller="actions ...
- ion-refresher 下拉更新数据
使用指令ion-refresher可以为容器eg:ion-scroll 和 ion-content进行拉动刷新 <ion-scroll> <ion-refresher on-refr ...
- tableView header Refresh 下拉刷新/上拉加载
一. UIScrollView 的分类 //作为入口 #import <UIKit/UIKit.h> #import "RefreshHeader.h" #import ...
- Ionic4.x ion-refresher 下拉更新
官方文档:https://ionicframework.com/docs/api/refresher <ion-header> <ion-toolbar> <ion-ti ...
- 下拉更新列表Android-PullToRefresh
项目地址:https://github.com/chrisbanes/Android-PullToRefresh
随机推荐
- (WPF) 文件和文件夹选择对话框。
点击button,选择一个excel文件,并将文件名显示在textbox上. private void btnSelectErrorTableFile_Click(object sender, Rou ...
- C++命名空间 namespace的作用和使用解析
一. 为什么需要命名空间(问题提出) 命名空间是ANSIC++引入的可以由用户命名的作用域,用来处理程序中 常见的同名冲突. 在 C语言中定义了3个层次的作用域,即文件(编译单元).函数和复合语句.C ...
- RMAN_学习实验2_RMAN Duplicate复制数据库过程(案例)
待整理 对于基于生产环境下的数据库的版本升级或者测试新的应用程序的性能及其影响,备份恢复等等,我们可以采取从生产环境以克隆的方式将其克隆到本地而不影响生产数据库的正常使用.实现这个功能我们可以借助rm ...
- hdu 5438 Ponds dfs
Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Problem Descr ...
- ADO.NET基础(增删改查)
ADO.NET是一种数据访问技术,就是将C#和MSSQL连接起来的一个纽带.可以通过ADO.NET将内存中的临时数据写入到数据库中,也可以将数据库中的数据提取到内存中供程序调用. ADO.NET是所有 ...
- UCOS-消息邮箱(学习笔记)
任务间数据传递通过缓冲区进行,如果将缓冲区赋值给时间控制块成员:指针OSEventPtr,且任务控制块类型为OS_EVENT_TYPE_MBOS则即为消息邮箱: 一创建消息邮箱:OS_EVENT *O ...
- Altiium Designer 09 解决局域网冲突的办法(转载)
Altiium Designer 09 解决局域网冲突的办法(转载) 一 通过防护墙禁止进程访问网络: 1.1打开DXP.EXE,然后在360的流量防护墙或WINDOWS防护墙禁止该进程访问网络.注意 ...
- 4个理由告诉你Java为何排行第一
Java已经有20年的历史了,甚至更久,而这取决于你所询问的人和你的计算方式.忽略它的年龄不看,Java依然排行第一.它的实用性.性能和向后兼容性都彰显其价值所在.2016年伊始,标志着我们已经走过了 ...
- Enumerator yielder.yield 与 Proc.yield 区别
最近看ruby cookbook遇到这个用法,google一下,这里原文解释 http://stackoverflow.com/questions/18865860/enumerator-yielde ...
- SQL Server 2005中的分区表(一):什么是分区表?为什么要用分区表?如何创建分区表?(转)
如果你的数据库中某一个表中的数据满足以下几个条件,那么你就要考虑创建分区表了. 1.数据库中某个表中的数据很多.很多是什么概念?一万条?两万条?还是十万条.一百万条?这个,我觉得是仁者见仁.智者见 ...