近來沒有什么值得寫的東西，空閑的時(shí)候幫前端的同學(xué)做了些大屏上的展示模塊，就放在這里寫寫吧，手把手“需求->設(shè)計(jì)-> 實(shí)現(xiàn)”，受眾偏新手向。
目前創(chuàng)新互聯(lián)公司已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、谷城網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
為了直觀便于理解， 直接把結(jié)果貼在上面。
如上所示，基本需求比較簡單明了， “分頁顯示供應(yīng)商、供應(yīng)占比列表，自動(dòng)輪播”。
一、需求評審
該有的環(huán)節(jié)還是要有，盡管需求簡單，評審不能省略，無論形式。開發(fā)的同學(xué)千萬不要真的相信需求就這么簡單，否則南轅北轍，出力不討好，那必定是日常-_-||。
于是有豐富填坑經(jīng)驗(yàn)的開發(fā)同學(xué)，對于這個(gè)簡單的模塊需求，可能會(huì)提出如下的一些問題
1. 如果只有一頁，要不要輪播？
2.每頁的輪播間隔頻率是多少？
3.如果列表沒有數(shù)據(jù)，如何顯示這個(gè)模塊？
4.數(shù)據(jù)的刷新時(shí)機(jī)？是翻頁刷新，輪播一圈刷新，還是其他？
5.這個(gè)綠色的比值是什么含義？ 是不是還有紅色？
6.百分比的小數(shù)位？
7.如果接口異常比如網(wǎng)絡(luò)不通，如何表示這種異常？
8.供應(yīng)商的名字會(huì)不會(huì)有500字那么長？ 放不下如何布局？
……等等
以上任何一個(gè)未明確的需求，都可能成為你編碼完成后的一個(gè)bug或優(yōu)化建議。 o(*￣︶￣*)o。
二、設(shè)計(jì)評審
關(guān)于上面待確認(rèn)的每一個(gè)問題，我們偉大的產(chǎn)品經(jīng)理都一一耐心的給出了“令人信服的”回答后。還是不能馬上開始編碼。下面我們需要進(jìn)行一些技術(shù)方案的設(shè)計(jì)討論，由技術(shù)leader把關(guān)。例如：
1. 數(shù)據(jù)流，這個(gè)列表的數(shù)據(jù)，是從數(shù)據(jù)庫中的哪幾個(gè)表取出的？ 確認(rèn)下查詢邏輯。
2.接口設(shè)計(jì)，是一次返回前端所有數(shù)據(jù)，還是支持分頁查詢。
3.性能考慮，查詢頻率是不是較高，并發(fā)是不是大，缺不缺索引，要不要上緩存？
4.輪播如何實(shí)現(xiàn)？ 有沒有已經(jīng)集成的輪播控件，是否滿足要求，還是需要自己寫一個(gè)。
5.如何進(jìn)行模塊化開發(fā)，作為一個(gè)模塊集成嵌入到整體頁面中。
……等等
明確了以上的問題后，作為前端同學(xué)的我，是不是可以開始擼代碼了？
三、想清楚再寫
說到這里，
一類同學(xué)已經(jīng)開始著手編碼了， 第一個(gè)想到需要寫的方法可能是，ajax 去后臺(tái)請求數(shù)據(jù)列表的接口。
另一類同學(xué)，可能仍在構(gòu)思，如何組織代碼，提煉主要的數(shù)據(jù)結(jié)構(gòu)和功能方法。
這里我們顯然應(yīng)該向“另外一類”同學(xué)學(xué)習(xí)。想清楚再寫，是一個(gè)毫無疑問的好習(xí)慣。
技術(shù)預(yù)研
實(shí)現(xiàn)一個(gè)功能，首先要掃除其中的未知技術(shù)點(diǎn)，掃除了所有未知之后，才能夠優(yōu)化的組織實(shí)現(xiàn)方案。
上面的需求對于我這種半吊子前端來說，比較關(guān)鍵的兩個(gè)技術(shù)問題是。
1）用什么方案來實(shí)現(xiàn)滑動(dòng)動(dòng)畫。 2）如何實(shí)現(xiàn)“無限滾動(dòng)”。
滑動(dòng)動(dòng)畫——經(jīng)過一番百度，總結(jié)下動(dòng)畫可能的實(shí)現(xiàn)方案，包括用JS實(shí)現(xiàn)或者用CSS實(shí)現(xiàn)。 各有優(yōu)劣，js 兼容性好，控制靈活；CSS性能高，平滑流暢。因?yàn)槲覀兊膭?dòng)畫非常線性，簡單，于是這里我們決定采用CSS動(dòng)畫作為動(dòng)畫的實(shí)現(xiàn)方案。
通過簡單的研究，我們已經(jīng)弄清楚了， 想讓一個(gè)頁面元素具有一個(gè)動(dòng)畫效果，可以通過向他添加一個(gè)包含了動(dòng)畫關(guān)鍵真的選擇器來實(shí)現(xiàn)，比如定義一個(gè)滑出動(dòng)畫類，把這個(gè)css類加到元素上，元素就可以實(shí)現(xiàn)滑出的動(dòng)畫效果。
無限滾動(dòng)——思考下滾動(dòng)頁面，雖然對于數(shù)據(jù)來說可能會(huì)分成很多頁，但對于屏幕展示來說，實(shí)際上最多同時(shí)出現(xiàn)兩個(gè)頁面，一個(gè)是前一頁，一個(gè)是當(dāng)前頁。在不滾動(dòng)的時(shí)候只有當(dāng)前頁需要顯示。
順著這個(gè)思路， 滾動(dòng)這個(gè)動(dòng)作對應(yīng)，“當(dāng)前頁飛入”“前一頁飛出”這兩個(gè)細(xì)分動(dòng)作，特別的情況是，初始顯示時(shí)，是沒有“前一頁”的。
那么滾動(dòng)這個(gè)動(dòng)作大概思路就是，
1. 根據(jù)當(dāng)前頁號取得對應(yīng)數(shù)據(jù)，繪制HTML頁面，append到滾動(dòng)區(qū)域，對其添加“飛入”動(dòng)畫
2. 根據(jù)當(dāng)前頁號取得上一頁頁面元素，對其添加“飛出”動(dòng)畫，動(dòng)畫結(jié)束后將其移除, 僅顯示當(dāng)前頁。
四、編碼實(shí)現(xiàn)
終于到了編碼的時(shí)間了。
用到的 css 動(dòng)畫類選擇器，以及關(guān)鍵幀
.slip_in_animation{ animation: slip_in 1s; } .slip_out_animation{ animation: slip_out 1s; } /*右側(cè)滑入*/ @keyframes slip_in { from {transform:translateX(100%);} to{transform:translateX(0);} } /*右側(cè)滑入*/ @keyframes slip_out { from {transform:translateX(0);} to{transform:translateX(-100%);} }
重慶分公司
重慶分公司
