溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一.目標
提供幾種主題色給用戶選擇，然后根據用戶的選擇改變應用的主題色；
二.實現原理
1.準備不同主題色的樣式文件；
2.將用戶的選擇記錄在本地緩存中；
3.每次進入應用時，讀取緩存，根據緩存的信息判斷要加載哪個樣式文件即可；
三.具體實現思路
1.準備四個對應不同主題色的樣式文件：
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.主題色選擇后，在入口文件根據緩存判斷要加載哪個主題色樣式：
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；
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
