react實(shí)現(xiàn)換膚功能的示例代碼

一.目標(biāo)

創(chuàng)新新互聯(lián)，憑借十載的網(wǎng)站制作、成都網(wǎng)站制作經(jīng)驗(yàn)，本著真心·誠心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計網(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：

 ```
  <span style={{color:"#0097e5"}} >
        <i className={`skinTag skinTag0 ${this.state.skinIndex==0?'active':''}`} onClick={this.toggleSkin.bind(this,0)}></i>
        <i className={`skinTag skinTag1 ${this.state.skinIndex==1?'active':''}`} onClick={this.toggleSkin.bind(this,1)}></i>
        <i className={`skinTag skinTag2 ${this.state.skinIndex==2?'active':''}`} onClick={this.toggleSkin.bind(this,2)}></i>
        <i className={`skinTag skinTag3 ${this.state.skinIndex==3?'active':''}`} onClick={this.toggleSkin.bind(this,3)}></i>
  </span>

  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)。

網(wǎng)站欄目：react實(shí)現(xiàn)換膚功能的示例代碼
URL標(biāo)題：http://muchs.cn/article46/pdgheg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站排名、電子商務(wù)、搜索引擎優(yōu)化、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)