全球热推荐:AngularJS中的refresher该如何使用?使用技巧

发布时间:   来源:CSDN  

1.问题:

AngularJS中的refresh好refresher该如何使用?


(资料图片)

2.源代码:

前台代码:

2.1是固定格式,自己可以去官网看看介绍:\[\]

后台代码:

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();表示数据加载完成,解散;

相关文章Related

返回栏目>>