亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2018年08月14日 10:00:49   作者:秋収冬藏  
這篇文章主要介紹了react實現(xiàn)換膚功能的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

一.目標

提供幾種主題色給用戶選擇,然后根據(jù)用戶的選擇改變應用的主題色;

二.實現(xiàn)原理

1.準備不同主題色的樣式文件;

2.將用戶的選擇記錄在本地緩存中;

3.每次進入應用時,讀取緩存,根據(jù)緩存的信息判斷要加載哪個樣式文件即可;

三.具體實現(xiàn)思路

1.準備四個對應不同主題色的樣式文件:

 ![](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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 前端開發(fā)使用Ant Design項目評價

    前端開發(fā)使用Ant Design項目評價

    這篇文章主要為大家介紹了前端開發(fā)使用Ant Design項目評價,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • 關(guān)于react-router-dom路由入門教程

    關(guān)于react-router-dom路由入門教程

    這篇文章主要介紹了關(guān)于react-router-dom路由入門教程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • react-dnd?API拖拽工具詳細用法示例

    react-dnd?API拖拽工具詳細用法示例

    這篇文章主要為大家介紹了react-dnd?API拖拽工具的詳細用法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • react?定位組件源碼解析

    react?定位組件源碼解析

    這篇文章主要為大家介紹了react定位組件源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • React中使用collections時key的重要性詳解

    React中使用collections時key的重要性詳解

    這篇文章主要給大家介紹了關(guān)于在React.js中使用collections時key的重要性,注意:一定不能不能忘了key,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面跟著小編來一起學習學習吧。
    2017-08-08
  • react中使用better-scroll滾動插件的實現(xiàn)示例

    react中使用better-scroll滾動插件的實現(xiàn)示例

    滾動在很多地方都可以使用,本文主要介紹了react中使用better-scroll滾動插件的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-07-07
  • 阿里低代碼框架lowcode-engine設置默認容器詳解

    阿里低代碼框架lowcode-engine設置默認容器詳解

    這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine設置默認容器詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • 解決React報錯Cannot?find?namespace?context

    解決React報錯Cannot?find?namespace?context

    這篇文章主要為大家介紹了React報錯Cannot?find?namespace?context分析解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • react.js使用webpack搭配環(huán)境的入門教程

    react.js使用webpack搭配環(huán)境的入門教程

    本文主要介紹了react 使用webpack搭配環(huán)境的入門教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-08-08
  • react-router4按需加載(踩坑填坑)

    react-router4按需加載(踩坑填坑)

    這篇文章主要介紹了react-router4按需加載(踩坑填坑),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01

最新評論