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字符串常用的方法
Mar 10 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
Vue v-text指令简单使用方法示例
Sep 19 Javascript
vue下载二进制流图片操作
Oct 26 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实现全角字符转为半角方法汇总
2015/07/09 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python中属性和描述符的正确使用
2016/08/23 Python
详解python的ORM中Pony用法
2018/02/09 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python实现图片中文字分割效果
2019/07/22 Python
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
清扬洗发水广告词
2014/03/14 职场文书
导游个人求职信范文
2014/03/23 职场文书
师范生见习报告
2014/10/31 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
酒店温馨提示语
2015/07/14 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang