如何在ionic 3中使用loading控制器实现spinner？

Question

我希望在ionic3中实现带有加载控制器的spinner。我已经实现了简单的加载控制器，如何做呢？谢谢提前。

我的当前加载器

我想要类似这样的东西。

- Niraj

---

http://ionicframework.com/docs/components/#loading - Sampath

我想要像“显示自定义”选项一样的东西，但是找不到源代码。我已经实现了简单的加载器。https://ionicframework.com/docs/api/components/loading/LoadingController/ - Niraj

那里出了什么问题？你能展示一下 代码 吗？ - Sampath

@Sampath，没有任何问题，我只是想改善用户体验。我已经上传了我的当前加载器和我想要的图片。我无法找到要添加哪些属性来实现它。在其中该怎么做-让loader = this.loading.create（{ content: 'Loading Products...', }）; - Niraj

请查看此答案 https://dev59.com/G6Hia4cB1Zd3GeqPbfEY#44111306 - HaseebR7

那很有帮助，但是无法实现。 - Niraj

Answer 1

presentLoadingCustom() {
    let loading = this.loadingCtrl.create({
      spinner: 'hide',
      content: `<img src="assets/img/gif.gif" />`,
      duration: 5000
    });

    loading.onDidDismiss(() => {
      console.log('Dismissed loading');
    });

    loading.present();
  }

在图像标签内添加一些gif图像，测试结果良好。

输出：

- Mohan Gopi

---

我需要在HTML中放置<spinner>标签并编写一些CSS才能使用它吗？ - Niraj

https://drive.google.com/open?id=0B09yT3sAy4UtbWU2X0ozM3pNZTg 这是它的样子。 - Niraj

@Niraj请检查我的更新答案，如果你需要任何gif图像https://giphy.com/gifs/mashable-3oEjI6SIIHBdRxXI40将此gif图像保存在本地并放置在资产文件夹中，一切都正常。 - Mohan Gopi

谢谢，当添加图像时它正在工作 - let loader = this.loading.create({ spinner: 'hide', content: <img src="assets/img/spinner.png">, duration: 5000 }); - Niraj

我很高兴它能帮到你。 - Mohan Gopi

请添加此选项：dismissOnPageChange: true - aimme

Answer 2

Ionic 2&3内置了一个服务，用于在后台执行一些耗时的活动（例如从远程数据库加载数据）时，阻止用户界面并向用户提供视觉反馈。您只需使用LoadingController，这是从ionic-angular模块中提供的。因此，首先导入LadingController。

import { LoadingController } from 'ionic-angular';

然后创建一个属性，并将其注入到类构造函数中

export class LoginPage {
loading: any;
constructor(public loadingController:LoadingController){...}
}

在请求数据的方法中创建加载指示器。

login() {
    this.loading = this.loadingController.create({ content: "Logging in ,please wait..." });
    this.loading.present();
    this.errors = "";
    //api service call
    this.authService.postData(this.userData, 'api/account/login').then((result) => {
      this.responseData = result;
      if (result != null) {
        this.loading.dismissAll();
        //console.log(result);
        this.common.setLocalData(DataKey.User.toString(), result);

        this.navCtrl.push(TabsPage);
      }
      else {
        this.loading.dismissAll();
        this.errors = "Nope, Try Again";
      }
    }, (err) => {
      this.loading.dismissAll();
      this.errors = "Nope, Try Again";
      // Error log
    });
  }

当您成功登录后，方法dismissAll()会隐藏加载指示器，以便您可以继续正常地与应用程序进行交互。

- Manveer Singh

---

我们在 Ionic 中每个页面中都需要使用 create 函数吗？ 难道我们不能创建一个全局的 Provider，然后只需要编写 show() 和 hide() 两个方法吗？ - Kunal Kakkad

是的，我们也在全球范围内提供创建服务。 - Manveer Singh