摘要:一目標提供幾種主題色給用戶選擇,然后根據用戶的選擇改變應用的主題色二實現原理準備不同主題色的樣式文件將用戶的選擇記錄在本地緩存中每次進入應用時,讀取緩存,根據緩存的信息判斷要加載哪個樣式文件即可三具體實現思路準備四個對應不同主題色的樣式文件
一.目標
? 提供幾種主題色給用戶選擇,然后根據用戶的選擇改變應用的主題色;
二.實現原理??1.準備不同主題色的樣式文件;
??2.將用戶的選擇記錄在本地緩存中;
??3.每次進入應用時,讀取緩存,根據緩存的信息判斷要加載哪個樣式文件即可;
![](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;
四.其他?? 賣個小廣告:我有一個小程序,可以掃碼商品的條碼進行留言;別人掃同一個商品的條碼就可以看到你的留言;
?? 讓條形碼變成你的郵差~~~~
?? 歡迎掃碼體驗:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96902.html
摘要:之前在做網站換膚,所以今天想聊聊網站換膚的實現。一般實現如上圖,我們會看到在某些網站的右上角會出現這么幾個顏色塊,點擊不同的顏色塊,網站的整體顏色就被替換了。 之前在做網站換膚,所以今天想聊聊網站換膚的實現。網頁換膚就是修改顏色值,因此重點就在于怎么來替換。 一般實現 showImg(https://user-images.githubusercontent.com/12515800/...
摘要:社區的認可目前已經是相關最多的開源項目了,體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰篇)系類文章四:手摸手,帶你用vue擼后臺 系列...
摘要:社區的認可目前已經是相關最多的開源項目了,體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰篇)系類文章四:手摸手,帶你用vue擼后臺 系列...
摘要:最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個打包生成多份皮膚文件因為項目是使用構建的,要想生成多份文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個文件中整 source 最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路 要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個 打包生成多...
閱讀 1868·2021-11-22 09:34
閱讀 1141·2021-10-09 09:44
閱讀 3001·2021-09-29 09:35
閱讀 3617·2021-09-14 18:01
閱讀 1465·2021-08-16 10:49
閱讀 1084·2019-08-29 14:11
閱讀 849·2019-08-29 12:47
閱讀 3068·2019-08-26 13:47