How to use custom SVG as refreshingSpinner in ion-refresher Ionic 3

问题

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.

回答1:

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>

See code here: https://stackblitz.com/edit/ionic-jtupjr

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

来源：https://stackoverflow.com/questions/52628778/how-to-use-custom-svg-as-refreshingspinner-in-ion-refresher-ionic-3

标签

ionic3

spinner