最近花了半个月的时间,做了一个淘宝购物车页面的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

淘宝购物车页面 PC端和移动端实战的更多相关文章

  1. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  2. web——自己实现一个淘宝购物车页面

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  3. Vue(小案例_vue+axios仿手机app)_购物车(二模拟淘宝购物车页面,点击加减做出相应变化)

    一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                         ...

  4. 仿淘宝购物车demo---增加和减少商品数量

    在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...

  5. jQuery实现淘宝购物车小组件

    我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...

  6. ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐功能

    如今随便上个网都能够看到淘宝.京东等各大电商平台的双十一购物狂欢宣传,从2009年開始淘宝愣是把11.11这一天打造成了全民购物狂欢节.阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是100 ...

  7. android ------ RecyclerView 模仿淘宝购物车

    电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. RecyclerView 模仿淘宝购物车功能(删除选择商品,商品计算,选择, 全选反选,商品数量加减等) 看看效果图 ...

  8. vue实现淘宝购物车功能

    淘宝购物车功能,效果如下图 非常简单的逻辑,没有做代码的封装,代码如下 <div class="list-container"> <div class=" ...

  9. 从淘宝和网易的font-size思考移动端怎样使用rem?

    最近翻了一下关于移动端的rem的使用,怎样最方便.在读到流云诸葛的一篇关于<从网易与淘宝的font-size思考前端设计稿与工作流>的文章后,来总结一下. 然而根据我以往做移动端web项目 ...

随机推荐

  1. C#中的线程(一)入门

    文章系参考转载,英文原文网址请参考:http://www.albahari.com/threading/ 作者 Joseph Albahari,  翻译 Swanky Wu 中文翻译作者把原文放在了& ...

  2. [置顶]PADS PCB功能使用技巧系列之NO.001- 如何走蛇形线?

    蛇形线是布线过程中常用的一种走线方式,其主要目的是为了调节延时满足系统时序设计要求,但是设计者应该有这样的认识:蛇形线会破坏信号质量,改变传输延时,布线时要尽量避免使用,因此一块PCB上的蛇形线越多并 ...

  3. WPF画线问题,几千条以后就有明显的延迟了。

      我现在是这么画的,class A { private GeometryGroup _lines; private Path _path; public A() {    _path.Data = ...

  4. Ubuntu16.04.1 安装MyCat

    Mycat是一个开源的分布式数据库系统,但是由于真正的数据库需要存储引擎,而Mycat并没有存储引擎,所以并不是完全意义的分布式数据库系统. 安装Java环境,配置全局环境变量 MyCAT是使用JAV ...

  5. hdoj 1878 欧拉回路

    欧拉回路 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  6. Android资源管理框架(Asset Manager)简要介绍和学习计划

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8738877 Android应用程序主要由两部分 ...

  7. java文件读写操作

    Java IO系统里读写文件使用Reader和Writer两个抽象类,Reader中read()和close()方法都是抽象方法.Writer中 write(),flush()和close()方法为抽 ...

  8. ubuntu安装新版QQ

    我一直无法解决Ubuntu QQ问题,而最近我重装ubuntu之后在网络上找到与QQ相关的内容,网上有大神开发出了新版的wineQQ,解决了我们对QQ的需求.经过尝试,完成了QQ安装 如图 安装的是w ...

  9. 洛谷.T22136.最长不下降子序列(01归并排序 分治)

    题目链接 \(Description\) 给定一个长为n的序列,每次可以反转 \([l,r]\) 区间,代价为 \(r-l+1\).要求在\(4*10^6\)代价内使其LIS长度最长,并输出需要操作的 ...

  10. ArcGIS案例学习笔记_3_2_CAD数据导入建库

    ArcGIS案例学习笔记_3_2_CAD数据导入建库 计划时间:第3天下午 内容:CAD数据导入,建库和管理 目的:生成地块多边形,连接属性,管理 问题:CAD存在拓扑错误,标注位置偏移 教程:pdf ...