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

编程问答 2022-05-29

问题描述

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

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

mycursor.execute(f'UPDATE discord_levels SET `message_count`={int(rank_data["message_count"])} WHERE `discord_id`="{author.id}";')

官方doc上没有涂色信息

解决方法

如果您有不止一页，并且您希望将微调器颜色与页面颜色相匹配，但您必须在 global.scss 上指定此项。您可以根据需要创建尽可能多的微调颜色。并且您可以通过 CSS 类使用它们。我在下面分享了它的 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>
ionic-frameworkionic4ionic5refresherspinnerspinnerspinner