一.目标

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

二.实现原理

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

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

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

三.具体实现思路

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

 ![](https://images2018.cnblogs.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;

四.其他

   卖个小广告:我有一个小程序,可以扫码商品的条码进行留言;别人扫同一个商品的条码就可以看到你的留言;

   让条形码变成你的邮差~~~~

   欢迎扫码体验:

react实现网站换肤功能的更多相关文章

  1. link rel=alternate网站换肤功能

    此方法借助HTML rel属性的alternate属性值实现. <link href="reset.css" rel="stylesheet" type= ...

  2. JS实现网页换肤功能效果

    网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...

  3. 一种简单的实现:Android一键换肤功能

    现在的APP开发,通常会提供APP的换肤功能,网上流传的换肤代码和实现手段过于复杂,我把原作者的代码重新整理抽取出来,转换成Eclipse项目,重新整理成正确.可直接运行的项目. 代码运行结果如图. ...

  4. .NET vs2010中使用IrisSkin2.dll轻松实现winForm窗体换肤功能

    IrisSkin2.dll是一款很不错的免费皮肤控件,利用它可以轻松的实现winForm窗体换肤! 网上很多朋友说在VS2010中不能使用IrisSkin2.dll,我这里提供一个取巧的办法. Iri ...

  5. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  6. 【转】Javascript+css 实现网页换肤功能

    来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...

  7. Android 换肤功能的实现(Apk插件方式)

    一.概述 由于Android 没有提供一套统一的换肤机制,我猜可能是因为国外更注重功能和体验的原因 所以国内如果要做一个漂亮的换肤方案,需要自己去实现. 目前换肤的方法大概有三种方案: (1)把皮肤资 ...

  8. 用js来实现页面的换肤功能(带cookie记忆)

    用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的D ...

  9. cookie换肤功能

    <div class="selectSkin"> <input id="red" class="themeBtn" typ ...

随机推荐

  1. AngularJS 控制器函数

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. GET&&POST请求编码过程

    编码.解码 我们在开发过程中不可避免的一个话题就是编码和解码,那么什么是编码什么是解码呢?为什么要进行编码和解码呢?下面我们一一分析! 编码和解码的概念 编码是信息从一种形式或格式转换为另一种形式的过 ...

  3. 一个logstash引发的连环案,关于logstash提示:Reached open files limit: 4095, set by the 'max_open_files' option or default, files yet to open: 375248

    不多说,直接上问题.版本logstash-2.4.0,启动后提示错误: !!! Please upgrade your java version, the current version '1.7.0 ...

  4. OGG抽取进程异常问题排查一例

    1.问题现象抽取进程常常running,但是没有新产生trail文件,lag比较大 GGSCI (xxxdb) > info all Program Status Group Lag at Ch ...

  5. [POI2008]MAF-Mafia(图论,贪心)

    题目描述 Mob feud rages in Equatorial Byteotia. The mob bosses have come to the country's capital, Byteb ...

  6. Floyd 算法详解

    Floyd-Warshall Floyd算法,是一种著名的多源最短路算法. 核心思想: 用邻接矩阵存储图,核心代码为三重循环,第一层枚举中间点k,二三层分别枚举起始点i与目标点j.然后判断经过中间点k ...

  7. web前端逻辑计算,血的教训

    在web前端进行页面开发的过程中,难免的遇到逻辑问题,这不是什么大问题,既然走上IT条黑道,那小伙伴们的逻辑推理能力及逻辑计算能力是不会有太大问题的. 然而,有的逻辑计算,就算你逻辑计算能力超强,也不 ...

  8. dom4j支持Xpath的具体操作

    ***默认情况下,dom4j不支持xpath. 如果想要使用xpath,需要引入jaxen-1.1-beta-6.jar包. 在dom4j中提供了两个方法来支持xpath. ***selectNode ...

  9. 爬虫之request模块高级

    一.cookie&session cookie:服务器端使用cookie来记录客户端的状态信息 实现流程: 执行登陆操作(获取cookie) 在发起个人主页请求时,需要将cookie携带到该请 ...

  10. ctf题目writeup(9)

    继续刷题,找到一个 什么 蓝鲸安全的ctf平台 地址:http://whalectf.xin/challenges (话说这些ctf平台长得好像) 1. 放到converter试一下: 在用十六进制转 ...