摘要:一目標提供幾種主題色給用戶選擇,然后根據(jù)用戶的選擇改變應(yīng)用的主題色二實現(xiàn)原理準備不同主題色的樣式文件將用戶的選擇記錄在本地緩存中每次進入應(yīng)用時,讀取緩存,根據(jù)緩存的信息判斷要加載哪個樣式文件即可三具體實現(xiàn)思路準備四個對應(yīng)不同主題色的樣式文件
一.目標
? 提供幾種主題色給用戶選擇,然后根據(jù)用戶的選擇改變應(yīng)用的主題色;
二.實現(xiàn)原理??1.準備不同主題色的樣式文件;
??2.將用戶的選擇記錄在本地緩存中;
??3.每次進入應(yīng)用時,讀取緩存,根據(jù)緩存的信息判斷要加載哪個樣式文件即可;
2.在主頁給用戶提供主題色選擇的html:
```
toggleSkin(index){
setItem("skin",index) //將最新的主題色名稱更新到本地緩存中
this.loadingToast("主題色更換中..")
location.reload() //主題色更改后刷新頁面
}
```
3.主題色選擇后,在入口文件根據(jù)緩存判斷要加載哪個主題色樣式:
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);的,結(jié)果不知道為什么把四個樣式文件都加載了,改成上面那個就沒問題了,有空再研究一下require;
四.其他?? 賣個小廣告:我有一個小程序,可以掃碼商品的條碼進行留言;別人掃同一個商品的條碼就可以看到你的留言;
?? 讓條形碼變成你的郵差~~~~
?? 歡迎掃碼體驗:
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/96902.html
摘要:之前在做網(wǎng)站換膚,所以今天想聊聊網(wǎng)站換膚的實現(xiàn)。一般實現(xiàn)如上圖,我們會看到在某些網(wǎng)站的右上角會出現(xiàn)這么幾個顏色塊,點擊不同的顏色塊,網(wǎng)站的整體顏色就被替換了。 之前在做網(wǎng)站換膚,所以今天想聊聊網(wǎng)站換膚的實現(xiàn)。網(wǎng)頁換膚就是修改顏色值,因此重點就在于怎么來替換。 一般實現(xiàn) showImg(https://user-images.githubusercontent.com/12515800/...
摘要:社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了,體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺 系列...
摘要:社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了,體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺 系列...
摘要:最近項目中要實現(xiàn)一個換膚的功能,大體想了下,記錄一下思路要實現(xiàn)換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個打包生成多份皮膚文件因為項目是使用構(gòu)建的,要想生成多份文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個文件中整 source 最近項目中要實現(xiàn)一個換膚的功能,大體想了下,記錄一下思路 要實現(xiàn)換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個 打包生成多...
閱讀 2065·2021-11-22 09:34
閱讀 1243·2021-10-09 09:44
閱讀 3096·2021-09-29 09:35
閱讀 3685·2021-09-14 18:01
閱讀 1563·2021-08-16 10:49
閱讀 1169·2019-08-29 14:11
閱讀 908·2019-08-29 12:47
閱讀 3136·2019-08-26 13:47