reac如何t實現更換皮膚顏色的功能

這篇文章帶給大家的內容是關於reac如何t實現更換皮膚顏色的功能，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一.目標

  提供幾種主題色給使用者選擇，然後根據使用者的選擇改變應用的主題色；

二.實作原則

  1.準備不同主題色的樣式檔案；
  2.將使用者的選擇記錄在本地快取中；
  3.每次進入應用時，讀取緩存，根據緩存的資訊判斷要加載哪個樣式文件即可；

#三.具體實現思路

1.準備四個對應不同主題色的樣式檔：

 ![](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){});

  在這裡遇到了一個坑，剛開始的時候我是直接用require(./static/css/${aa}.scss);的，結果不知道為什麼把四個樣式檔案都載入了，改成上面那個就沒問題了，有空再研究一下require；

相關推薦：

jQuery中的方法有哪些?jQuery中常用的方法（附程式碼）

js閉包是什麼？對js閉包的理解（附程式碼）

#

以上是reac如何t實現更換皮膚顏色的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！