【Angular】refresher刷新器
来源:互联网 发布:mac地址修改 编辑:程序博客网 时间:2024/06/02 03:34
1.问题:
AngularJS中的refresh好refresher该如何使用?
2.源代码:
前台代码:
<ion-refresher (ionRefresh)="refresh($event)"> <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新..." refreshingSpinner="circles" refreshingText="努力刷新数据中..."> </ion-refresher-content> </ion-refresher>
2.1是固定格式,自己可以去官网看看介绍:\[<ion-content>\]
后台代码:
refresh(refresher) { this.pageIndex = 1;//定义初始页面 /*加载数据*/ let loading = this.loadingCtrl.create({ content: '刷新中...', showBackdrop: false }); loading.present(); this.userService.getUsers(this.pageIndex,this.id) .subscribe(result => { this.emails= result; this.toastCtrl.create({ message: '数据刷新成功', duration: 1000 }).present(); refresher.complete(); loading.dismiss(); }, (e) => { console.log(e, '初始化错误 error'); refresher.complete(); loading.dismiss(); }); }
3.截图:
无
4.总结:
refresh(refresher) { }
表示刷新方法,小括号内传入参数为一个刷新器;大括号内为具体的刷新方法.loading由loadingCtrl控制器来创建(create)({ })
let loading = this.loadingCtrl.create({
content: '数据刷新中...',
showBackdrop: false//
});
content:是刷新时候的内容;
showBackdrop:是否加载背景;类似于background;
3.present用于呈现效果;
loading.present();
4.subscribe:订阅,订购的意思。表示,我前面写了方法,后面要跟踪查看效果。就像你订了一份报纸(loading动作),报社每天就要给你发报纸,给你看效果(subscribe);
subscribe(result => { this.emails= result; this.toastCtrl.create({ message: '数据刷新成功', duration: 1000 }).present(); refresher.complete(); loading.dismiss(); }
这里,subscribe(result=>{ })小括号里面是用上面的结果(result)来执行方法,方法在大括号内{ }。
这里的‘=>’就可以理解为一种function动作;只不过,传入值在‘=>’前面,方法在{ }里面;
5.toastCtrl是吐司控制器;
toast是一种类似于alert的效果,用来作提示信息,但是过一定时间就会消失,不会像alert的弹出框,你必须手动点击取消之类的按钮才能取消掉;这个是一个减退的效果,你不操作,它自己等会会消失掉;toast必须要toastCtrl控制;duration是存在时间,1000毫秒,即1秒;create(),产生;present()展示;
6.refresher.complete()表示刷新器完成;
7.loading.dismiss();表示数据加载完成,解散;
- 【Angular】refresher刷新器
- ionic refresher(下拉刷新)
- 【翻译】Ionic的刷新器-Refresher官方文档翻译
- ionic ion-refresher刷新完毕
- ionic ion-refresher 下拉刷新的使用。
- 手机上拉刷新 angular
- ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新
- ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新
- angular中刷新显示与ng-bind
- angular 广播实现实时刷新视图
- angular设置路由实现无刷新跳转
- 【angular】路由之刷新报404
- 《Angular之部署刷新404错误解决》
- angular 锚点 刷新界面 浏览器后退按钮是否可用
- jquery实现angular左侧导航栏,页面刷新仍选中
- 【Angular】——路由之刷新报404
- Nginx+Tomcat部署Angular+javaweb项目(解决刷新404)
- Angular拦截器
- jQuery源码阅读(三)--解决冲突noConflict()
- android webrtc大致调用流程与AndroidWeRTC demo
- 如何从低水平的重复,到高质量的勤奋
- QT QMessageBox
- Linux 内存管理浅析
- 【Angular】refresher刷新器
- jq 第二次选中没效果
- JAVA——设计模式之单例模式
- codevs 1152 细胞分裂
- C++程序员是如何评价GO的
- Mapreduce编程TOP N
- 在MySQL中如何让结果集返回行号
- Android StatusBar 状态栏颜色设置
- java中的基本数据类型一定存储在栈中吗?