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
随机推荐
- PL/SQL查询Oracle数据乱码/Oracle客户端乱码解决办法
[如果此方法都试了就是不行,那么就重复尝试,先把环境变量给删了,注册表里的键值也删除了,然后重启,再配置,肯定行!我试过!] 先确定Oracle服务器采用的是何种编码: select userenv( ...
- C# 通过委托控制进度条以及多线程更新控件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- [物理学与PDEs]第3章 磁流体力学
[物理学与PDEs]第3章第1节 等离子体 [物理学与PDEs]第3章第2节 磁流体力学方程组 2.1 考虑到导电媒质 (等离子体) 的运动对 Maxwell 方程组的修正 [物理学与PDEs]第3章 ...
- C++学习28 重载>>和<<(输入输出运算符)
在C++中,系统已经对左移运算符“<<”和右移运算符“>>”分别进行了重载,使其能够用于输入输出,但是输入输出的处理对象只能是系统内建的数据类型.系统重载这两个运算符是以系统类 ...
- 【译】深入理解python3.4中Asyncio库与Node.js的异步IO机制
转载自http://xidui.github.io/2015/10/29/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3python3-4-Asyncio%E5%BA%93% ...
- [技巧]把Excel里的数据插入到数据库里的方法
.如果先在6行数据的最后一列在插入一列数据,请先把列名写好,然后再第一行的该列下输入数字, 然后选中该单元格向下拖拽一个单元格然后就能看到黑色的小框, 双击右下角黑色的小点,6行数据就 会填上默认的第 ...
- Codeforces 519E A and B and Lecture Rooms [倍增法LCA]
题意: 给你一棵有n个节点的树,给你m次询问,查询给两个点,问树上有多少个点到这两个点的距离是相等的.树上所有边的边权是1. 思路: 很容易想到通过记录dep和找到lca来找到两个点之间的距离,然后分 ...
- [CF 475D] CGCDSSQ (RMQ)
题目链接:http://codeforces.com/contest/475/problem/D 是昨天晚上的CF题目,题意是给定你n个数,问你所有子区间内的最小公约数是x的个数是多少 问的康神,了解 ...
- FPGA一个博客学习
FPGA一个博客学习 http://bbs.ednchina.com/BLOG_PERSONALCAT_100185_2001619.HTM
- SVN小小用法(一)svn服务器搭建
最近由于公司项目用SVN作为版本控制工具,本着学一点是一点的原则,今天小配了下svn,给大家介绍一下 软件:TortoiseSVN-1.8.3.24901-win32-svn-1.8.4.msi(本人 ...