如何使用自定义SVG作为离子刷新器Ionic 3中的refreshingSpinner [英] How to use custom SVG as refreshingSpinner in ion-refresher Ionic 3

问题描述

我一直在将 Ionic v1 升级到 v3 .快完成了.但是由于一个问题，我没有取得任何进展.就像下面的视频一样，只是创建一个refreshingSpinner.

I've been upgrading Ionic v1 to v3. It's almost done. But I am not making any progress because of one problem. It's just create a refreshingSpinner like the following video.

https://www.dropbox.com/s /h820nz759bcqhvn/refresher-spinner.mov?dl=0

此处是视频我使用了默认的微调器.

And here is the video which I've used the default spinner.

希望能为这种麻烦找到一个好的解决方案.

Hope to get a good solution for this trouble.

推荐答案

因此，根据ionic的文档，您可以通过在"ion-refresher"标签中引入自己的模板来自定义刷新器的模板:

So according to ionic's documentation you can customize the refresher's template by introducing your own template inside "ion-refresher" tags:

<ion-refresher (ionRefresh)="loadData($event)">
// your own customized view goes in here
</ion-refresher>

基本上，您可以执行以下操作:

Basically you can do something like this:

<ion-content padding>
    <ion-refresher (ionRefresh)="loadData($event)">
    // your custom code goes here:
        <div style="width: 100%; height: 64px; margin: auto">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" xml:space="preserve">
                <svg:rect fill="#aaa" stroke="#eee" stroke-width="4" x="25" y="25" width="50" height="50"></svg:rect>
            </svg>
        </div>
    // end of your custom code
    </ion-refresher>
    <h2>{{header}}</h2>
    <p>
        This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
    </p>
    <p>
        Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
</ion-content>

在此处查看代码: https://stackblitz.com/edit/ionic-jtupjr

您还可以检查更新内容组件的源代码，以了解Ionic如何创建它并重新创建您的内容:

You can also check the source code for the refresher content component to understand how Ionic creates it and recreate yours:

https ://github.com/ionic-team/ionic/blob/master/core/src/components/refresher-content/refresher-content.tsx

这篇关于如何使用自定义SVG作为离子刷新器Ionic 3中的refreshingSpinner的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！