Question

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

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

here是我使用默认微调器的视频。

希望对此问题能找到一个好的解决方案。

Answer 1

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

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

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

<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如何创建它并重新创建您的内容：

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

如何使用自定义SVG作为离子刷新离子3的refreshingSpinner

1 个答案: