整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天給大家?guī)硎且粋€(gè)金屬的開關(guān)，大家看一下，別看著操作很簡(jiǎn)單但是很復(fù)雜的，包括這里面沒有用任何的圖片和圖標(biāo)，純用css寫出來的，大家可以看一下。
解析一下代碼區(qū)域，我的開發(fā)工具是h pro x開發(fā)uni up。
·首先用個(gè)vivo式的容器定一個(gè)容器，里面放了個(gè)第二層的vivo式的容器，里面弄了個(gè)老本開關(guān)標(biāo)簽，弄一個(gè)開關(guān)手柄。
·在unif中應(yīng)該知道是什么意思，就是隨著真假而變換樣式，兩個(gè)，大家看這個(gè)顏色就應(yīng)該知道了，是背景滑動(dòng)的時(shí)候，下面就是位置的變化。
·gs部分定義了個(gè)flash，在進(jìn)行點(diǎn)擊的時(shí)候從真變假，從假變成真的切換，樣式就跟著真假進(jìn)行變換的。
·cs部分都是提前定義好的固定的樣式，這是整體的。
·這就是開關(guān)容器的基本的設(shè)定，大家可以看到它的大小、寬高，取消底部外編劇的，把這個(gè)刪掉，其實(shí)也沒什么用，前面多寫了，可以刪掉。
·這個(gè)是開關(guān)標(biāo)簽樣式的設(shè)定，就是顏色根據(jù)真假進(jìn)行變化，說白就是固定的，除了顏色以外其他都是固定的。
·這個(gè)就是開關(guān)手柄，就金屬的手柄的樣式，大家可以牢記一下，可以自己動(dòng)手去寫一下。
其實(shí)就這么幾行，cs部分基本上都是固定的固定色，只有這里進(jìn)行了真假的切換和樣式的切換才形成動(dòng)態(tài)的效果。
喜歡的可以點(diǎn)贊收藏一下，想要這個(gè)元代碼的可以找我嘮嗑或者點(diǎn)擊下方都可以，多多會(huì)給你們發(fā)送，但是我還是點(diǎn)個(gè)自己動(dòng)手去寫，我還是建議，今天就先講到這。
天來介紹一款類tab切換效果的插件，方便大家在項(xiàng)目中使用！
效果圖：
切換時(shí)候左右有過渡效果。
實(shí)現(xiàn)代碼：
html:
js:
年做了大量的 HTML5 項(xiàng)目，遇到了很多坑。在這個(gè)過程中學(xué)到了一些之前不具備的知識(shí)，所以這篇文章就簡(jiǎn)單分享一下這方面的話題。
傳統(tǒng)的MPA
首先，說一個(gè)比較古老的東西，叫做 MPA。
MPA 的全稱是 Multi-page Application，意思是整個(gè)應(yīng)用（站點(diǎn)）由多個(gè)完整的 html 構(gòu)成。用戶在頁(yè)面 1 點(diǎn)擊跳轉(zhuǎn)，需要向服務(wù)端請(qǐng)求頁(yè)面 2，請(qǐng)求成功后渲染。而用戶返回時(shí)，相當(dāng)于是點(diǎn)擊了瀏覽器的返回，頁(yè)面退回到之前的歷史記錄，并重新加載出來。
在這樣的模式下，頁(yè)面間切換慢、不流暢的問題比較突出，尤其是在移動(dòng)端。
同時(shí)，它還產(chǎn)生了幾個(gè)小問題：
SPA
隨著對(duì)移動(dòng)端體驗(yàn)需求的提高以及技術(shù)的進(jìn)步，另一種模式 SPA（Single-page Application）逐漸成為主流。
SPA 簡(jiǎn)單來說，就是原來在 MPA 中的多個(gè) html，現(xiàn)在被放在了一個(gè) html 中，并被分成若干個(gè)片段。跳轉(zhuǎn)、返回的本質(zhì)變成了分段的「隱藏」與「顯示」。跳轉(zhuǎn)不需要反復(fù)對(duì)服務(wù)端進(jìn)行請(qǐng)求，從而使得頁(yè)面與頁(yè)面之間切換更加快速流暢。
在這樣的機(jī)制下，跳轉(zhuǎn)與返回完全由代碼控制，所以可以通過代碼定義頁(yè)面轉(zhuǎn)場(chǎng)的效果、返回。
在設(shè)計(jì)轉(zhuǎn)場(chǎng)動(dòng)畫時(shí)，我們需要留意的是導(dǎo)航欄是 Native 的還是 HTML5 的。如果導(dǎo)航欄是 Native 的，那 HTML5 頁(yè)面不包括導(dǎo)航欄，它相當(dāng)于是網(wǎng)頁(yè)外的元素，不在轉(zhuǎn)場(chǎng)效果的設(shè)計(jì)范圍內(nèi)。
WebView
說 HTML5 的跳轉(zhuǎn)，就不得不說 WebView。簡(jiǎn)單來說，WebView 是在 App 中用于顯示 web 內(nèi)容的容器。上文提到的 MPA 和 SPA，都裝在了這個(gè)叫做 WebView 的容器中。
用戶點(diǎn)擊頁(yè)面中的元素進(jìn)行跳轉(zhuǎn)，除了前面的兩種方式外，還有第三種：新打開 WebView 的方式。在這樣的方式下，跳轉(zhuǎn)的本質(zhì)是 HTML5「告訴」Native，由 Native 執(zhí)行打開新 WebView，并在新 WebView 中加載頁(yè)面。
因?yàn)?Native 的機(jī)制，打開新 WebView 的同時(shí)，之前的 WebView 會(huì)被自然、完整地保留。所以這時(shí)，之前的幾個(gè)問題就變?yōu)椋?/p>
不過需要注意的地方是，打開新 WebView 是一個(gè)資源消耗比較大的操作。如果我們?cè)谠O(shè)計(jì)一個(gè)流程時(shí)，需要比較多的連續(xù)使用這種方式，需要和研發(fā)同學(xué)進(jìn)行充分的溝通。
比較特殊的Replace
前述的三種跳轉(zhuǎn)，都會(huì)產(chǎn)生歷史記錄。MPA、SPA 的歷史記錄是在 HTML5 中產(chǎn)生，新開 WebView 中的記錄是在 Native 中產(chǎn)生。
在 MPA 或 SPA 中，如果跳轉(zhuǎn)時(shí)使用 Replace 方法，它會(huì)用新頁(yè)面替換之前的頁(yè)面，歷史記錄中沒有之前頁(yè)面的記錄。
這是一種特殊的跳轉(zhuǎn)方式，在設(shè)計(jì)一些不可逆的流程時(shí)可考慮使用。
多頁(yè)面回退
了解了上述的幾種機(jī)制后，我們來看一個(gè)小的應(yīng)用場(chǎng)景──多頁(yè)面回退。
我們?cè)趯?shí)際業(yè)務(wù)中，經(jīng)常會(huì)有這樣的需求。假設(shè)我們有 1、2、3 三個(gè)頁(yè)組成的一個(gè)流程，在頁(yè)面 3 上有個(gè)「完成」按鈕點(diǎn)擊回到頁(yè)面 1。在不同的交互模式下，實(shí)現(xiàn)這樣的跳轉(zhuǎn)有著不同的機(jī)制。
1. SPA模式下的正常跳轉(zhuǎn)
這種模式是 3 個(gè)頁(yè)面都在一個(gè) WebView 中。點(diǎn)擊頁(yè)面 3 中的「完成」按鈕，回退 -2 ，即回退 2 步歷史記錄，到頁(yè)面 1。
2. 新打開WebView
打開新 WebView 又分三種方式。
如果我們把 3 個(gè)頁(yè)面，拆分到 2 個(gè) WebView 中，如下圖，點(diǎn)擊完成按鈕，即關(guān)閉自身所在的 WebView。
同樣是打開新的 WebView，如果我們按如下圖的方法拆分會(huì)稍微復(fù)雜。這時(shí)點(diǎn)擊完成按鈕，首先關(guān)閉自身所在的 WebView，當(dāng)頁(yè)面 2「意識(shí)」到自己重新被展現(xiàn)時(shí)，自動(dòng)退回 1 步到頁(yè)面 1。
每次打開新的 WebView，這時(shí)點(diǎn)擊完成，回退的本質(zhì)是 HTML5「告訴」Native 關(guān)閉多個(gè) WebView。需要特別注意的是，HTML5 中實(shí)現(xiàn)這種方式不是天然具備的，它需要 Native 具有一次關(guān)閉多個(gè) WebView 的能力。所以我們?cè)谠O(shè)計(jì)方案時(shí)，需要了解清楚自家的 Native 是否有這樣的能力。
總結(jié)
以上，簡(jiǎn)單說了幾種 HTML5 的跳轉(zhuǎn)方式。這些跳轉(zhuǎn)方式，沒有絕對(duì)的對(duì)與錯(cuò)，我們?cè)谠O(shè)計(jì)方案時(shí)，需要根據(jù)實(shí)際的業(yè)務(wù)需求與技術(shù)的限制，來整體考慮解決方案。
根據(jù)個(gè)人經(jīng)驗(yàn)，也有幾點(diǎn)小帖士分享給大家：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
