一.目標(biāo)
提供幾種主題色給用戶選擇，然后根據(jù)用戶的選擇改變應(yīng)用的主題色；
二.實(shí)現(xiàn)原理
1.準(zhǔn)備不同主題色的樣式文件；
2.將用戶的選擇記錄在本地緩存中；
3.每次進(jìn)入應(yīng)用時(shí)，讀取緩存，根據(jù)緩存的信息判斷要加載哪個(gè)樣式文件即可；
三.具體實(shí)現(xiàn)思路
1.準(zhǔn)備四個(gè)對(duì)應(yīng)不同主題色的樣式文件：
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ù)緩存判斷要加載哪個(gè)主題色樣式：
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){});在這里遇到了一個(gè)坑，剛開始的時(shí)候我是直接用 require(./static/css/${aa}.scss);的，結(jié)果不知道為什么把四個(gè)樣式文件都加載了，改成上面那個(gè)就沒問題了，有空再研究一下require；
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
