文档章节

ionic <ion-infinite-scroll> 和 <ion-refresh>

Jack088
 Jack088
发布于 2015/04/18 16:30
字数 554
阅读 777
收藏 1

滚动刷新 : ion-infinite-scroll

使用ion-infinite-scroll指令可以为滚动容器(ion-scroll或ion-content)增加 滚动刷新功能:

<ion-infinite-scroll on-infinite="">...</ion-infinite-scroll>

ion-infinite-scroll指令有如下属性:

  • on-infinite - 必须。当滚动到底部时执行此表达式

  • distance - 可选。距底部距离百分比。当距离底部超过此数值时,执行on-infinite。默认为1%

  • icon - 可选。载入时显示的图标。默认是ion-load-d。ionic推荐使用spinner代替icon属性

  • spinner - 可选。载入时的spinner。默认是ionSpinner

  • immediate-check - 可选。是否在载入时立即检查滚动框范围

<ion-content ng-controller="MyController">   
    <ion-infinite-scroll     on-infinite="loadMore()"     distance="1%">   
    </ion-infinite-scroll> 
</ion-content>
function MyController($scope, $http) {   
    $scope.items = [];   
    $scope.loadMore = function() {     
    $http.get('/more-items').success(function(items) {       
        useItems(items);      
    $scope.$broadcast('scroll.infiniteScrollComplete');//广播通知数据加载完成    
 });  
  };  
  //接受广播消息
 $scope.$on('stateChangeSuccess', function() {     $scope.loadMore();   }); }

当没有更多数据加载时,就可以用一个简单的方法阻止无限滚动,那就是angular的ng-if 指令:

<ion-infinite-scroll   ng-if="moreDataCanBeLoaded()"   icon="ion-loading-c"   on-infinite="loadMoreData()"> </ion-infinite-scroll>

当 icon="ion-loading-c" 无效果时,可是用 refreshing-icon="ion-loading-c"

拉动刷新 : ion-refresher

使用指令ion-refresher可以为滚动容器(ion-scroll或ion-content)增加 拉动刷新/pull-to-refresh的功能:

<ion-refresher></ion-refresher>

ion-refresher指令有以下可选的属性:

on-refresh - 当用户向下拉动足够的距离并松开时,执行此表达式

on-pulling - 当用户开始向下拉动时,执行此表达式

pulling-text - 当用户向下拉动时,显示此文本

pulling-icon - 当用户向下拉动时,显示此图标

refreshing-icon - 当用户向下拉动并松开后,显示的等待图标。ionic推荐使用spinner 代替这个属性

spinner - 和refreshing-icon的作用一样,但spinner是基于SVG的动画

disable-pulling-rotation - 禁止下拉图标旋转动画

注意在刷新完毕后,应当使用作用域的$broadcast()方法通知框架:

$scope.$broadcast("scoll.refreshComplete")

<ion-content ng-controller="MyController">   
   <ion-refresher pulling-text="Pull to refresh" refreshing-text="Loading..." refreshing-icon="ion-loading-c" pulling-icon="ion-ios7-arrow-thin-down" on-refresh="doRefresh()"> </ion-refresher> 
</ion-content>
function MyController($scope, $http) {   
    $scope.doRefresh = function() {     
    $http.get('/more-items').success(function(items) {       
        //TODO:  
    $scope.$broadcast('scroll.refreshComplete');//广播通知数据刷新完成    
 });  
  };
  //接受广播消息
  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
    // logic})

PS:

//广播消息,通知上推加载更多的代码执行完毕
$scope.$broadcast('scroll.infiniteScrollComplete');

$scope.$broadcast("scoll.refreshComplete");

参考:

http://www.w2bc.com/Article/33160

© 著作权归作者所有

共有 人打赏支持
Jack088
粉丝 41
博文 405
码字总数 59469
作品 0
程序员
ionic 1.0.0 RC0 发布,HTML5 移动端应用框架

ionic 1.0.0-RC.0 发布,代号为 "neodymium-newt",此版本现已提供下载:src="https://github.com/driftyco/ionic/archive/v1.0.0-rc.0.zip" href="https://github.com/driftyco/ionic/archi......

oschina
2015/03/06
6.1K
14
Ionic 2.3.0 发布,HTML5 移动应用框架

Ionic 2.3.0 发布了,本次更新内容较多,看到还有对 IE 进行支持的改进。详细如下: Bug 修复 alert: pass id to alert inputs (46fe1ff), closes #10603 datetime: don't always disable d...

局长
2017/03/23
2.7K
5
Ionic 2.2.0 发布,HTML5 移动应用框架

Ionic 2.2.0 发布了。 更新内容: 新特性 alert: 添加在 alert 上设置模式的功能 (f577e54) split-pane: 支持 ion-nav 和 ion-menu (#10343) (9e4c3a6) typography: 为所有元素添加 text-wra...

达尔文
2017/03/09
1K
3
ionic 下拉刷新 上拉加载 同时调用导致一次加载多页问题

本文主要解决Ionic1 中 碰到下拉刷新 和 上拉加载 同时调用导致初始化 加载两页或多页的问题 一般情况我们显示一个列表, 默认初始化获取第一页数据, 当判断还有下一页数据时,在通过上啦加载获...

yanhl
06/01
0
0
ionic 1.1.1 "yttrium-yeti" 发布,移动应用框架

ionic 1.1.1 "yttrium-yeti" 发布,此版本改进内容如下: Bug 修复 browser: ios9 location patch (e5b85df) ionContent: fix scroll sizing with native scrolling and pull-to-refresh (3a......

oschina
2015/11/07
1K
6

没有更多内容

加载失败,请刷新页面

加载更多

00.编译OpenJDK-8u40的整个过程

前言 历经2天的折腾总算把OpenJDK给编译成功了,要说为啥搞这个,还得从面试说起,最近出去面试经常被问到JVM的相关东西,总感觉自己以前学的太浅薄,所以回来就打算深入学习,目标把《深入理...

凌晨一点
今天
4
0
python: 一些关于元组的碎碎念

初始化元组的时候,尤其是元组里面只有一个元素的时候,会出现一些很蛋疼的情况: def checkContentAndType(obj): print(obj) print(type(obj))if __name__=="__main__": tu...

Oh_really
昨天
6
2
jvm crash分析工具

介绍一款非常好用的jvm crash分析工具,当jvm挂掉时,会产生hs_err_pid.log。里面记录了jvm当时的运行状态以及错误信息,但是内容量比较庞大,不好分析。所以我们要借助工具来帮我们。 Cras...

xpbob
昨天
120
0
Qt编写自定义控件属性设计器

以前做.NET开发中,.NET直接就集成了属性设计器,VS不愧是宇宙第一IDE,你能够想到的都给你封装好了,用起来不要太爽!因为项目需要自从全面转Qt开发已经6年有余,在工业控制领域,有一些应用...

飞扬青云
昨天
4
0
我为什么用GO语言来做区块链?

Go语言现在常常被用来做去中心化系统(decentralised system)。其他类型的公司也都把Go用在产品的核心模块中,并且它在网站开发中也占据了一席之地。 我们在决定做Karachain的时候,考量(b...

HiBlock
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部