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
随机推荐
- Scala第二章学习笔记
最基本的练习~: 使用伴生对象: object holder{ class Foo{ private var x = 5} object Foo{def im_in_yr_foo(f: Foo) = ...
- Shell_Oracle Erp基于主机文件Host开发详解(案例)
2014-06-20 Created By BaoXinjian
- cf666 C. Codeword 组合数学 离线分块思想
time limit per test 6 seconds memory limit per test 256 megabytes input standard i ...
- M2M协议
1, M2M协议 M2M是Machine-to-Machine/Man的简称,是一种以机器终端智能交互为核心的.网络化的应用与服务.M2M协议规定了人机和机器之间交互需要遵从的通信协议.随着科学技术的 ...
- iCheck表单美化插件使用方法详解(含参数、事件等)
iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...
- nfs不能自动mount(转载)
From:http://www.wenzizone.com/2009/08/14/nfs_can_not_automount_supplementary.html 手动挂载nfs没有问题,说明port ...
- Scroll滚动后发生的改变
条件:一个panel,足以让panle产生滚动条的N多控件. 动作:拖动滚动条. 影响:呈现在当前panle视图中的控件的Location.Y或Top值>=0,隐藏在滚动条上方的控件的Locat ...
- 离线使用echarts及一些细节
最近要做图表,用js起来太麻烦,所以就找些开源的库来用,发现echarts挺不错, echarts的文档把所有东西都说的很明白了,直接下载zip包,要是想离线使用的话只需要引用下载包里面的dist文件 ...
- crm 2011 plugin setparent setbusiness 用户更改经理 更改办事处
背景: 在更改经理或者更改办事处时,使用plugin处理相应的团队. 问题:plugin写完,注册时发现使用update注册没有效果,然后bing得到,这里要使用setbusiness 和 setpa ...
- ecmall数据字典
ecm_acategory //文章分类表 字段 类型 Null 默认 注释 cate_id int(10) 否 自增ID号,分类ID号 cate_name varchar(100) 否 分类的名称 ...