Ionic4/5 不同页面的 Ion Refresher 颜色变化

Question

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

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

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

官方没有上色信息doc

Answer 1

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

global.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>

Ionic4/5 不同页面的 Ion Refresher 颜色变化

Ion Refresher color change on diferents pages of Ionic4/5

spinner

refresher

ionic-framework

ionic4

ionic5