首頁  >  文章  >  web前端  >  reac如何t實現更換皮膚顏色的功能

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

不言
不言原創
2018-08-13 15:32:481749瀏覽

這篇文章帶給大家的內容是關於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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn