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
随机推荐
- c# 甘蔗斗地主1.4存档修改器
using System; using System.Collections.Generic; using System.ComponentModel; using System.Dat ...
- c++学习-特殊类成员
静态变量: #include<iostream> #include<string> #include <typeinfo> using namespace std; ...
- RabbitMQ介绍1 - 由来
RabbitMQ是一个异步消息通信中间件,用erlang语言开发,实现了AMQP(Advanced Message Queue )协议,是一个开源产品,官方网站:http://www.rabbitmq ...
- Redis、Redis+sentinel安装(Ubuntu 14.04下Redis安装及简单测试)
Ubuntu下Redis安装两种安装方式: 1.apt-get方式 步骤: 以root权限登录,切换到/usr目录下. 接下来输入命令,apt-get install redis-server,如图: ...
- 无法创建spool文件
是因为没有用管理员运行CMD,并且数据库不需要使用超级管理员登录.
- bootstrap与jqueryui按钮冲突的解决
bootstrap与jqueryui按钮冲突的解决 (2013-10-15 14:09:36)转载▼ 标签: 情感 分类: jQuery 参考: http://getbootstrap.com/jav ...
- 关于JavaScript中apply与call的用法意义及区别(转)
JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 先来看看JS手册中对call的解释: call 方法调用一个对象的一个方法,以另一个对象替换当前对象. cal ...
- Delphi同步互斥总结
多个线程同时访问一个共享资源或数据时,需要考虑线程同步,Synchronize()是在一个隐蔽的窗口里运行,如果在这里你的任务很繁忙,你的主窗口会阻塞掉:Synchronize()只是将该线程的代码放 ...
- [POJ 1385] Lifting the Stone (计算几何)
题目链接:http://poj.org/problem?id=1385 题目大意:给你一个多边形的点,求重心. 首先,三角形的重心: ( (x1+x2+x3)/3 , (y1+y2+y3)/3 ) 然 ...
- POJ3352 Road Construction (双连通分量)
Road Construction Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Sub ...