一.目標(biāo)

創(chuàng)新新互聯(lián)，憑借十載的網(wǎng)站制作、成都網(wǎng)站制作經(jīng)驗(yàn)，本著真心·誠心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計(jì)網(wǎng)站有數(shù)千家案例。做網(wǎng)站建設(shè)，選創(chuàng)新互聯(lián)公司。

提供幾種主題色給用戶選擇，然后根據(jù)用戶的選擇改變應(yīng)用的主題色；

二.實(shí)現(xiàn)原理

1.準(zhǔn)備不同主題色的樣式文件；

2.將用戶的選擇記錄在本地緩存中；

3.每次進(jìn)入應(yīng)用時，讀取緩存，根據(jù)緩存的信息判斷要加載哪個樣式文件即可；

三.具體實(shí)現(xiàn)思路

1.準(zhǔn)備四個對應(yīng)不同主題色的樣式文件：

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

2.在主頁給用戶提供主題色選擇的html：

 ```
  
        
        
        
        
  

  toggleSkin(index){
   setItem('skin',index) //將最新的主題色名稱更新到本地緩存中 
   this.loadingToast('主題色更換中..')
   location.reload()    //主題色更改后刷新頁面
 }

```

3.主題色選擇后，在入口文件根據(jù)緩存判斷要加載哪個主題色樣式：

  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);的，結(jié)果不知道為什么把四個樣式文件都加載了，改成上面那個就沒問題了，有空再研究一下require；

 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。