如何在离子刷新器 Ionic 3 中使用自定义 SVG 作为 refreshSpinner答案

【问题标题】：How to use custom SVG as refreshingSpinner in ion-refresher Ionic 3如何在离子刷新器 Ionic 3 中使用自定义 SVG 作为 refreshSpinner
【发布时间】：2019-11-26 08:34:20
【问题描述】：

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

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

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

希望能找到解决这个问题的好办法。

【问题讨论】：

那么您尝试使用复习吗？ ionicframework.com/docs/api/components/refresher/Refresher 如果是这样，问题是什么 - 你不知道如何使用自定义 SVG？
是的，我用它来拉动刷新。但它仅支持用于 refreshSpinner 属性的专用微调器。我需要使用自定义微调器。
文档说您可以使用自定义的。如果您可以通过 stackblitz.com 分享您当前的实现，我可以展示您如何使用自定义 svg
好的。我将在 stackblitz.com 上分享这个问题
你能告诉我如何通过 stackblitz.com 分享它吗？不知道怎么用。

标签： ionic3 spinner

【解决方案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

【讨论】：

非常感谢。这看起来不错的样子。但是如果我们替换整个复习内容，则不会显示下拉图标。没有办法只替换刷新图标吗？
有，能分享一下你想要的内容吗？
基本上你想保留使用普通选项显示的“文本”等内容以供复习？
查看更新组件的链接源是否可以让您轻松创建相同的组件，然后按照您想要的方式修改它
是的，我想保留“文本”、“拉图标”等内容