Maison > interface Web > js tutoriel > le corps du texte

Comment Reac implémente-t-il la fonction de changement de couleur de peau ?

不言
Libérer: 2018-08-13 15:32:48
original
1777 Les gens l'ont consulté

Le contenu de cet article explique comment implémenter la fonction de changement de couleur de peau dans Reac. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Objectif

Proposer plusieurs couleurs de thème aux utilisateurs, puis modifier la couleur du thème de l'application en fonction du choix de l'utilisateur

Comment Reac implémente-t-il la fonction de changement de couleur de peau ?

2. Principe de mise en œuvre

1. Préparez des fichiers de style avec différentes couleurs de thème

2. Enregistrez la sélection de l'utilisateur dans le cache local
3. Chaque ; chaque fois que vous entrez dans l'application, lisez le cache et déterminez quel fichier de style charger en fonction des informations mises en cache

3 Idées de mise en œuvre spécifiques

1. couleurs :

 ![](https://images2018.cnblogs.com/blog/1178432/201808/1178432-20180813142303707-1847250400.png)
Copier après la connexion
2. Fournir aux utilisateurs une sélection de couleur de thème HTML sur la page d'accueil :

 "
   <span>
               <i></i>
               <i></i>
               <i></i>
               <i></i>
    </span>

   toggleSkin(index){
      setItem('skin',index)  //将最新的主题色名称更新到本地缓存中  
      this.loadingToast('主题色更换中..')
      location.reload()       //主题色更改后刷新页面
  }

"
Copier après la connexion
3. Une fois la couleur du thème sélectionnée, le fichier d'entrée détermine le style de couleur du thème. à charger en fonction du cache :

   var aa=''
   if(getItem('skin')=='0'){
        aa='app'
   }else if(getItem('skin')=='1'){
       aa='app-skin1'
   }else if(getItem('skin')=='2'){
       aa='app-skin2'
   }else if(getItem('skin')=='3'){
        aa='app-skin3'
   }else{
       aa='app'
   }
  require([`./static/css/${aa}.scss`], function(list){});
Copier après la connexion
J'ai rencontré un piège ici. Au début, j'ai utilisé require(

); Cependant, pour une raison quelconque, j'ai chargé les quatre fichiers de style et. remplacez-les par celui ci-dessus. Pas de problème. Étudions les exigences lorsque vous avez le temps ./static/css/${aa}.scss

Recommandations associées :

Quelles sont les méthodes couramment utilisées dans jQuery ( avec code)

Qu'est-ce que la fermeture js ? Comprendre les fermetures js (avec code)


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal