react实现换肤功能的示例代码


Posted in Javascript onAugust 14, 2018

一.目标

提供几种主题色给用户选择,然后根据用户的选择改变应用的主题色;

react实现换肤功能的示例代码

二.实现原理

1.准备不同主题色的样式文件;

2.将用户的选择记录在本地缓存中;

3.每次进入应用时,读取缓存,根据缓存的信息判断要加载哪个样式文件即可;

三.具体实现思路

1.准备四个对应不同主题色的样式文件:

![](https://images2018.3water.com/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.主题色选择后,在入口文件根据缓存判断要加载哪个主题色样式:

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;

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
Javascript 解构赋值详情
Nov 17 Javascript
详解vue-cli3使用
Aug 14 #Javascript
详解angular部署到iis出现404解决方案
Aug 14 #Javascript
学习React中ref的两个demo示例
Aug 14 #Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 #Javascript
浅析Vue实例以及生命周期
Aug 14 #Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 #Javascript
详解angular应用容器化部署
Aug 14 #Javascript
You might like
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
javascript 写类方式之八
2009/07/05 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
python转换摩斯密码示例
2014/02/16 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
标准自荐信范文
2014/01/29 职场文书
小学英语课后反思
2014/04/26 职场文书
工程部部长岗位职责
2015/02/12 职场文书
繁星春水读书笔记
2015/06/30 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
Java 多线程协作作业之信号同步
2022/05/11 Java/Android
python读取mat文件生成h5文件的实现
2022/07/15 Python