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 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
纯javascript制作日历控件
Jul 17 Javascript
AngularJS手动表单验证
Feb 01 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
微信小程序基础教程之echart的使用
Jun 01 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在线生成ico文件的代码
2007/10/09 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python实现堆栈与队列的方法
2015/01/15 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
python根据时间获取周数代码实例
2019/09/30 Python
Python:slice与indices的用法
2019/11/25 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
python 读取二进制 显示图片案例
2020/04/24 Python
PyQt5实现简单的计算器
2020/05/30 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
大学毕业自我鉴定范文
2014/02/03 职场文书
志愿者活动总结范文
2014/04/26 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
计划生育工作汇报
2014/10/28 职场文书
高中数学教学反思范文
2016/02/18 职场文书
聘任书的格式及模板
2019/10/28 职场文书