淘寶購物車頁面 PC端和移動端實戰

最近花了半個月的時間，作了一個淘寶購物車頁面的Demo。固然，爲了可以更加深刻的學習，不只僅有PC端的固定寬度的佈局，還實現了移動端在Media Query爲768px如下（也就是實現了ipad，iphone 6 plus，iphone6，S5等）的Flexbox彈性佈局。

 

還要再說的是，pc端和移動端淘寶購物車頁面的Bug基本修復完畢，徹底適合一個對HTML，CSS，CSS3，HTML5和Js有基礎，而且熟悉jQuery，SCSS，熟悉JSON數據交換格式，jQuery Ajax的人進行學習。固然對JSON並非必定說要很是熟悉，你會編寫對應的數據便可；對jQuery Ajax 應當知道常見的jQuery封裝好的HTTP請求方法，如$.get , $.post 等；在CSS3方面，須要熟悉Flexbox伸縮佈局盒模型。

 

源碼地址: Uncle-Keith的Github。

有必定前端基礎的同窗能夠嘗試閱讀一下源碼。固然，沒有前端基礎的人，也能夠閱讀，只是速度會慢些罷了。

 

這是淘寶購物車pc端頁面和移動端頁面的截圖。固然，這只是學習的過程，在移動端方面沒有使用MVVM框架實現。在淘寶移動端頁面上（非APP），淘寶團隊是使用Reactjs實現的。另外，全部的CSS，Js和圖片本人並無使用Gulp進行壓縮處理。 

注：這個截圖是在縮放比率爲80%的時候截下的，因此文字不太清晰。

（注：移動端頁面是在iphone5下截圖的）

 

 　　

　　接下來，只是會大概講一下pc端和移動端實現的功能，具體怎麼實現我會在以後的博文中分享。

 

　　在pc端實現的淘寶購物車頁面實現瞭如下功能，或者說的高端一些，實現了一些與用戶交互方面的功能。

　　1：頂部實現了hover狀態和非hover狀態時二級菜單的出現和隱藏，而且彈出的二級菜單absolute化。這裏的icon涉及了CSS3中的僞元素。而且向下的按鈕是使用CSS3實現的。

　　2：搜索框實現了功能比較多。

　　　　首先是當你輸入某個字符串以後會有相應的下拉菜單彈出。這裏涉及了jQuery Ajax 的方法，使用$.get方法去獲取JSON數據，而後動態加載HTML，最後返回到客戶端上。另外涉及了jQuery中的鍵盤事件keyup，當keycode爲13（也就是Enter鍵）時，會有相應的JSON數據被異步加載，而後放到相應的容器內。這樣作的好處是不用整頁刷新，對客戶體驗較好，特別是在移動端上。異步加載會極大減小流量的消耗。

　　　　固然這裏還要重點在說的是，若是但願能夠操做異步加載的數據，而後返回到客戶端上的相應內容時，這裏須要用到事件代理和事件冒泡的原理。什麼意思呢？就是說，若是你把一些事件綁定在被動態加載HTML的元素上面，那麼這些被綁定的事件會失效。解決方法是須要將事件綁定到body（或者其餘非動態加載的HTML）元素上。詳細的我會在以後的文章中談及。

　　3：商品的選擇，查詢，刪除，增長。

　　　　選擇商品大概有幾種邏輯：當點擊全選按鈕時，所有商品被選擇，而且計算相應的價格和商品數量；取消全選時，所有商品被取消，而且商品價格和數量相應變化；當在全選狀態下，某個商品被取消選擇，則取消全選狀態，而且會相應計算商品價格和商品數量；當全部商品被所有選中時，全選按鈕從新被激活，而且計算相應的商品價格和商品數量。

　　　　查詢商品：若是想要查詢本身購物車的商品，個人實現是本身去寫一些JSON數據，而後經過Ajax動態加載HTML，而後返回到客戶端。

　　　　刪除商品：pc端頁面還有一個沒有實現的就是當我去刪除某個商品時，如何刪除JSON數據裏面的相應商品數據。我能作到的就是在頁面上刪除。作法是使用了jQuery的detach()方法，而不是remove()方法。若是有博友知道怎麼實現JSON數據內的相應商品數據一併刪除，但願能給我留言，給予我必定的解決方案。

 　　4：固定底部的商品操做欄。

　　　　這裏主要有兩個知識點：一是讓整個footer的父容器fixed，而後bottom設置爲0。二是在.container元素上設置margin-bottom值，距離可視窗口底部有必定的距離。若是不設置的話，當拉到最後一個商品時，最後一個商品會被fixed的容器覆蓋。用戶體驗不夠好。

 

　　在移動端，一套代碼實現了不一樣設備的響應式佈局，我使用的Media Query最大支持768px。由於我是第一次接觸移動端頁面，移動端淘寶購物車頁面是基於CSS3的Flexbox伸縮佈局盒模型實現的，若是有什麼不足之處，但願博友指出，抱着學習的態度，本人積極改正。

　　在移動端上，實現的功能相對簡單，由於手機屏幕小的緣由，對不少在pc端存在的元素，在移動端頁面上都進行了相應地作了減法。

 

 

 

　　ok，大概的項目介紹就到這裏。相應功能的介紹我會在接下來的幾篇文章中談及。

 

 

　　感謝你們的閱讀。

 　　

　　轉載請註明出處：http://www.cnblogs.com/Uncle-Keith/p/5929713.html