react实现换肤功能

1fe1se 发布于2019-08-23 11:00 / 1943人阅读

摘要：一目标提供几种主题色给用户选择，然后根据用户的选择改变应用的主题色二实现原理准备不同主题色的样式文件将用户的选择记录在本地缓存中每次进入应用时，读取缓存，根据缓存的信息判断要加载哪个样式文件即可三具体实现思路准备四个对应不同主题色的样式文件

一.目标

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

二.实现原理

  1.准备不同主题色的样式文件；
  2.将用户的选择记录在本地缓存中；
  3.每次进入应用时，读取缓存，根据缓存的信息判断要加载哪个样式文件即可；

三.具体实现思路 1.准备四个对应不同主题色的样式文件：

 ![](https://images2018.cnblogs.com/blog/1178432/201808/1178432-20180813142303707-1847250400.png)

2.在主页给用户提供主题色选择的html：

 ```
   
               
               
               
               
    

   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；

四.其他

   卖个小广告：我有一个小程序，可以扫码商品的条码进行留言；别人扫同一个商品的条码就可以看到你的留言；
   让条形码变成你的邮差~~~~
   欢迎扫码体验：

超融合服务器 idc机房托管换肤功能 react实现轮播图实现WEBRTC功能打赏功能实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96902.html

react实现换肤功能

摘要：一目标提供几种主题色给用户选择，然后根据用户的选择改变应用的主题色二实现原理准备不同主题色的样式文件将用户的选择记录在本地缓存中每次进入应用时，读取缓存，根据缓存的信息判断要加载哪个样式文件即可三具体实现思路准备四个对应不同主题色的样式文件一.目标提供几种主题色给用户选择，然后根据用户的选择改变应用的主题色； showImg(https://segmentfault.com/i...

BlackMass 2019-08-05 18:05 评论0 收藏0
聊一聊前端换肤

摘要：之前在做网站换肤，所以今天想聊聊网站换肤的实现。一般实现如上图，我们会看到在某些网站的右上角会出现这么几个颜色块，点击不同的颜色块，网站的整体颜色就被替换了。之前在做网站换肤，所以今天想聊聊网站换肤的实现。网页换肤就是修改颜色值，因此重点就在于怎么来替换。一般实现 showImg(https://user-images.githubusercontent.com/12515800/...

CocoaChina 2019-08-23 16:12 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0
webpack构建下换肤功能的思路

摘要：最近项目中要实现一个换肤的功能，大体想了下，记录一下思路要实现换肤功能，目标就是打包生成多份皮肤文件，需要哪个就用哪个打包生成多份皮肤文件因为项目是使用构建的，要想生成多份文件，就要在入口中配置多个入口文件，每个入口文件会提取出一个文件中整 source 最近项目中要实现一个换肤的功能，大体想了下，记录一下思路要实现换肤功能，目标就是打包生成多份皮肤文件，需要哪个就用哪个打包生成多...

Andrman 2019-08-02 15:58 评论0 收藏0