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 相关文章推荐
非常好的js代码
Jun 27 Javascript
javascript 树控件 比较好用
Jun 11 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
JavaScript函数模式详解
Nov 07 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
JS如何在数组指定位置插入元素
Mar 10 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
Python标准库内置函数complex介绍
2014/11/25 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
简单了解Django ContentType内置组件
2019/07/23 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
PHP面试题-$message和$$message的区别
2015/12/08 面试题
会计岗位职责
2013/11/08 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
十八大感想感言
2014/02/10 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2014年生产部工作总结
2014/12/17 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python