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

    返回Web Essentials功能目录 本篇目录 介绍 样例文件 已知行为 介绍 这篇要讲的是Bundling,我看很多人把它翻译为捆绑,如果你喜欢你也可以这么理解,我是不太习惯,我还是喜欢它为bu ...

  2. 关于c#中的console用法大全

    C#之Console   Console.Write  表示向控制台直接写入字符串,不进行换行,可继续接着前面的字符写入.Console.WriteLine  表示向控制台写入字符串后换行.Conso ...

  3. jgroup 概述--官方文档

    原文地址:http://www.jgroups.org/manual/html/ch01.html# Chapter 1. Overview 1.1. Channel 1.2. Building Bl ...

  4. Javaweb统计在线人数的小栗子

    最近在学习Javaweb相关的内容(不黑不吹之前对web开发零基础),下面通过一个统计在线人数的小栗子讲讲Servlet监听器吧 开发环境 eclipse  tomcat 7 先说说这个小栗子的构思: ...

  5. 第10章 外观模式(Fa&#231;ade Pattern)

    原文   第10章 外观模式(Façade Pattern) 概述:   在软件开发系统中,客户程序经常会与复杂系统的内部子系统之间产生耦合,而导致客户程序随着子系统的变化而变化.那么如何简化客户程序 ...

  6. kali系统破解WPA密码实战

    上次发布过一篇在OSX系统破解WIFI密码的教程, 这次发布一篇使用kali破解wifi的教程 WEP和WPA/PSK的区别 WPA/PSK的加密方式相对于WEP的加密方式更加安全,WEP是一种老式的 ...

  7. LeetCode 31 Next Permutation / 60 Permutation Sequence [Permutation]

    LeetCode 31 Next Permutation / 60 Permutation Sequence [Permutation] <c++> LeetCode 31 Next Pe ...

  8. [Swift]LeetCode674. 最长连续递增序列 | Longest Continuous Increasing Subsequence

    Given an unsorted array of integers, find the length of longest continuous increasing subsequence (s ...

  9. smb 访问时 提示权限不够

    1. 确认 防火墙关闭和getenforce 为Permissive 状态. 关闭防火墙 service iptables stop 关闭  setenforce 0 2.windows 登录切换 身 ...

  10. Java线程池应用及原理分析(JDK1.8)

    目录 一.线程池优点 二.线程池创建 三.任务处理流程 四.任务缓存队列及排队策略 五.任务拒绝策略 六.线程池关闭 七.线程池实现原理 八.静态方法创建线程池 九.如何确定线程池大小 一.线程池优点 ...