react實現(xiàn)換膚功能的示例代碼
一.目標
提供幾種主題色給用戶選擇,然后根據(jù)用戶的選擇改變應用的主題色;
二.實現(xiàn)原理
1.準備不同主題色的樣式文件;
2.將用戶的選擇記錄在本地緩存中;
3.每次進入應用時,讀取緩存,根據(jù)緩存的信息判斷要加載哪個樣式文件即可;
三.具體實現(xiàn)思路
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.主題色選擇后,在入口文件根據(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于react-router-dom路由入門教程
這篇文章主要介紹了關(guān)于react-router-dom路由入門教程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03react中使用better-scroll滾動插件的實現(xiàn)示例
滾動在很多地方都可以使用,本文主要介紹了react中使用better-scroll滾動插件的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07解決React報錯Cannot?find?namespace?context
這篇文章主要為大家介紹了React報錯Cannot?find?namespace?context分析解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12react.js使用webpack搭配環(huán)境的入門教程
本文主要介紹了react 使用webpack搭配環(huán)境的入門教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-08-08