reac は肌の色を変更する機能をどのように実装していますか?-jsチュートリアル-php.cn

reac は肌の色を変更する機能をどのように実装していますか?

不言

リリース： 2018-08-13 15:32:48

オリジナル

1803 人が閲覧しました

この記事の内容は、Reac での肌の色を変更する機能の実装方法に関するものです。必要な方は参考にしていただければ幸いです。

1. 目標

ユーザーが選択できるいくつかのテーマの色を提供し、ユーザーの選択に従ってアプリケーションのテーマの色を変更します

reac は肌の色を変更する機能をどのように実装していますか?

2. スタイルファイルを準備します。さまざまなテーマの色

2. ユーザーの選択をローカルキャッシュに記録します

3. アプリケーションに入るたびにキャッシュを読み取り、キャッシュされた情報に基づいてどのスタイルファイルをロードするかを決定します

3. 具体的な実装のアイデア

1. 異なるテーマの色に対応する 4 つのスタイルファイルを準備します:

 ![](https://images2018.cnblogs.com/blog/1178432/201808/1178432-20180813142303707-1847250400.png)

ログイン後にコピー

2. ホームページでテーマの色の選択用の HTML を提供します:

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

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

"

ログイン後にコピー

3. テーマの色の選択後、エントリファイルによってテーマの色のスタイルが決定されます。キャッシュに基づいてロードするには:

   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){});

ログイン後にコピー