溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-10-03 10:19:57 來源：腳本之家 閱讀：208 作者：秋収冬藏 欄目：web開發(fā)

一.目標(biāo)

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

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

二.實(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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手