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. 添加控制器  1 <ion-content ng-controller="refleshCtr">

3. 在app.js 中控制器的

 1 .controller("refleshCtr",function($scope){
 2   $scope.lists=[
 3   {name:"list1"},
 4   {name:"list2"}
 5   ]
 6   $scope.doReFresh=function(){
 7     $scope.lists.unshift({name:"pull to refresh add list3"});
 8     $scope.$broadcast(‘scroll.refreshComplete‘);
 9     $scope.$apple()
10   }
11 })

定義了數組lists  ;下拉時調用doReFresh函數 ,$scope.lists.unshift({name:"pull to refresh add list3"}); 向數組插入了一條數據;

注意:

$scope.$broadcast(‘scroll.refreshComplete‘); // 廣播下拉更新完成   使list 數組可以正常使用
$scope.$apple()//在頁面中顯示

时间: 2024-10-07 20:52:56

ionic pull to refresh 下拉更新頁面的相关文章

160823、ionic上拉/下拉更新数据

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"

ionic的侧滑和下拉刷新效果

一,侧滑效果 主要涉及到三个地方 1,菜单页面 主要分为主页面和侧滑页面两部分,又分别都包含顶部bar和主要内容部分 注意:主页面内容部分,关键的菜单内容name要对应到是菜单内容的页面(在app.js中,下面会贴出) item href的构成:1,#本页面  2,app本页面链接   3,todolist/{{menu.groupId}}列表页面链接(没有冒号) <ion-side-menus> <!--主页面--> <ion-side-menu-content class

上拉加载、下拉更新

1.上拉加载 引用官网给出的代码 <ion-content> <ion-list> <ion-item *ngFor="let item of list"> {{item}} </ion-item> </ion-list> <!-- 这是官网给的代码,必须放在列表下方 --> <ion-infinite-scroll (ionInfinite)="doInfinite($event)" t

微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识

下拉更新.分享.阅读标识 本文配套视频地址:https://v.qq.com/x/page/h0554... 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一篇中,我们把列表这块的剩余功能做完:下拉更新.分享.阅读标识. 下拉更新功能 下拉更新这个功能与我们在第一章中写的小 demo 所用方法一致:onReachBottom. 当用户滚动过程中触发了 上拉 这个动作时候,微信小程序会自动监听到并执行 onReachBottom 这个函数,所以我们只需要把这个监听事件写好就

Ionic Js三:下拉刷新

在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-ref

小程序禁止下拉更新

在json中编辑 { "enablePullDownRefresh": false }

ionic angularjs三级级联下拉框显示

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

ionic 下拉刷新 — ion-refresher

在做项目的时候一般会遇到下拉刷新的功能,我不知道大家平时是怎么实现的.因为我们现阶段使用的是 ionic,所以我就学习了一下利于框架去实现下拉刷新的功能.下面给家说一下怎么用ionic实现页面的下拉刷新吧. 具体的实现请看下面的源码: HTML 代码 ion-refresher : 即为下拉刷新的图标: pulling-text="下拉刷新" 这里的问题可以随意更换,喜欢就好: on-refresh="doRefresh()" 这个便是当下拉的时候我们要执行的方法,

iscroll 下拉刷新,上拉加载

新手,直接贴代码了 <!DOCTYPE html><html class=""><head lang="en"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content=&