ionic-framework - Ionic4/5 不同页面上的 Ion Refresher 颜色变化

Question

我有一个包含不同页面的应用程序，每个页面都有不同的强调颜色

我需要更改 IonRefresher 颜色以匹配它，但我只找到有关全局更改它的信息，将以下代码添加到global.scss文件：

ion-refresher.refresher-native ion-spinner{
    color: var(--ion-color-secondary) !important;
}

官方文档上没有着色信息

Answer 1

如果您有不止一个页面，并且您希望将微调器颜色与页面颜色匹配，但您必须在global.scss. 您可以根据需要创建尽可能多的微调器颜色。您可以通过 CSS 类使用它们。我在下面分享了它的 HTML 和 CSS 代码，请看一下

全局.scss

 .red.refresher-native{
   ion-spinner{
      color: red!important;      
   }

   .arrow-container ion-icon{
      color: red!important;   
   }
} 

.green.refresher-native{
   ion-spinner{
      color: green!important;      
   }
   .arrow-container ion-icon{
      color: green!important;   
   }
} 
.purple.refresher-native{
   ion-spinner{
      color: purple!important;      
   }
   .arrow-container ion-icon{
      color: purple!important;   
   }
} 

html代码

//Change class name as per your requirement 
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)" class="red">
    <ion-refresher-content></ion-refresher-content>
</ion-refresher>

<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)" class="green">
    <ion-refresher-content></ion-refresher-content>
</ion-refresher>