更改离子刷新器和离子无限滚动颜色答案

【问题标题】：Change ion-refresher & ion-infinite-scroll color更改离子刷新器和离子无限滚动颜色
【发布时间】：2018-06-04 13:48:24
【问题描述】：

这是一个“简单”的请求，但我无法达到这个结果...... 在我的应用中，我有这两个组件：

<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content 
      pullingIcon="ios-arrow-down-outline"
      pullingText="Scorri per aggiornare"
      refreshingSpinner="circles"
      refreshingText="Aggiornamento...">>
    </ion-refresher-content>
  </ion-refresher>

和

<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
    loadingSpinner="bubbles"
    loadingText="Caricando più post ...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

它们在白色背景下工作正常。现在我需要将背景颜色更改为黑色，但现在两个组件的文本不再可见，因为默认情况下它是黑色的。如何更改两个组件的颜色？

我尝试了一个 CSS 类，但没有应用它的颜色。如何自定义这些组件？

谢谢

【问题讨论】：

标签： css ionic-framework colors customization ion-infinite-scroll

【解决方案1】：

正如docs 建议的那样（至少对于 ionic 版本 1）：

用户放开复习器后显示的 ionSpinner 图标。 SVG ionSpinner 现在是默认设置，取代了旋转字体图标。设置为 none 以禁用微调器和图标。

在 SVG 中关闭 color 是 fill 属性。所以你可以用它来代替color。

【讨论】：

【解决方案2】：

希望对你有帮助

HTML 代码

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content class="loadingspinner"
      loadingSpinner="crescent"
      loadingText="Loading...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

各自的 CSS

.loadingspinner{
    --color : #adadad;
}

【讨论】：

【解决方案3】：

.spinner-crescent{
    color: #adadad;
}

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。
嗨@DonaldDuck，我已经在答案中解释了修复。随时询问是否有任何疑问。我很乐意解释:)

【解决方案4】：

如果这对某人有帮助。您必须向无限滚动内容添加一个类，或者只使用标签选择器。

<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
        class="infinite-scroll-color"
        loadingSpinner="bubbles"
        loadingText="Caricando più post ...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

然后改变标记线的stroke属性，来改变spinner svg的颜色。

.infinite-scroll-color {
    line {
        stroke: #YOURCOLOR;
    }

    //If you want to change the text color too, just add this css
    .infinite-loading-text {
        color: #YOURCOLOR;
    }
}

干杯！

【讨论】：