淘宝购物车页面 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