pc项目功能实现，以及遇到的bug详解
主要实现的功能：
1.主页面功能
-
吸顶：
-
在满足吸顶条件的边界中，来回快速滚动滚动条，会出现bug：
QQ截图20181207170658.png
(如图示)
出现这个bug的原因：由于吸顶动画是在500毫秒内完成的，当开始触发吸顶的时候，又快速滚动到不满足吸顶的条件下，当前.baner的top属性为0。
解决的方法：在不满足吸顶条件的时候，添加finish();方法，先让吸顶效果完成，再取消吸顶
-
2.png
-
用户头像的移入移出显示效果
出现的bug：鼠标移入出现吸顶效果中的用户头像时会出现两个下拉列表框这样的情况：
3.png
或者是这种情况：
4.png
造成的原因，因为是，在吸顶效果的时候，通过克隆的方式，去创建新的.right添加到.baner中去，又是通过同样的类名选择器$(".user")，此时是同时存在两个的，当鼠标移入的时候，目标的下拉列表框机会出现两个。至于上图，是因为鼠标已经移入到上一个的下拉列表中显示的效果。（这些效果都是在滚动距离还没有超过第一个显示列表的高度，当超过了，其实还是会显示出两个，只不过第一个是被页面的上方）
解决方法：在满足吸顶克隆之后，把原来的.right给remove掉，同时在取消吸顶的时候又把.right给添加回原来的地方。
5.png
6.png
同时我把显示下拉列表封装为函数，方便调用实现效果：
7.png
-
轮播图实现
用swiper插件实现轮播效果，在这里，可以看出插件的魅力，不用书写过多的代码，只要引进这个swiper插件，new一个swiper对象，提供要轮播的对象，还有选择好轮播的方式插件就会帮忙去实现这轮播效果，这极大的方便了我们写代码的效率。在这其中并没有遇到bug
-
热卖商品区，点击左右切换按钮实现切换
-
鼠标移入移出热卖商品区内的商品，显示对应的商品信息
-
点击商品下的每一个小圆点，对应的小圆点添加上样式，实现显示对应的商品图片，和相应的价格（要阻止事件的冒泡，不然页面会跳转到商品详情页），在这里要用到ajax请求json数据，在json数据中图片的信息已经分好了组，并且每一个li都有对应的id编号，这个编号对应了json数据中的图片spu编号，一一对应。
-
品牌精选区智能周边与品质生活切换
2.详情页面功能：
-
实现动态显示商品的信息
根据在href属性中的spu对应的唯一的编号，实现点击不同的图片跳转到详情页面，根据这编号向json数据中获取到对应的json对象，在将信息显示在页面中。
-
放大镜效果
3.注册登录功能
-
对用户输入的内容进行验证
手机号码格式，获取验证码，输入的验证是否与获取到的一致，密码输入，验证密码格式，长度6-16， /^[0-9A-Za-z]{6,16}$/，只能是出现数字和字母，验证第二次输入的密码是否与第一次的密码一致。不符合规则的都会显示提示，当符合了规则，则可以注册。
-
对输入的手机号码进行唯一性验证
创建一个数据库，存放着手机号码与密码信息，在用户输入手机号码的时候，验证是否该号码被注册过。
-
登录功能
对用户输入的手机号码进行验证，向数据请求数据，根据数据返回的数据，提示用户。
4.购物车功能的实现
-
点击购买按钮，添加商品到购物车
点击生成商品小图片，做抛物线运动到“购物车”中，到达目的值啊把小图删掉。
-
点击按钮设置cookie
根据当前点击按钮对应商品的spu编号，从json中获取到对应商品的信息，再将这些商品信息存进cookie中，每点击相同的商品，计数器参数count加1
-
购物车商品数量显示
根据cookie中，所以商品的信息里的count值，取出来得到总和，显示出来。
5.购物车页面
-
将各个商品的信息显示到页面中，图片，名称，价格，数量，还有总和。
也是根据cookie，循环取出每个商品的信息，用模板字符串，在页面一一显示出来。
-
商品增加减少
点击对应的加和减，首先知道当前点击的对象对应的是哪一件商品，点击后修改对应的商品cookie数据，count+1或-1，减的话只能减到1，加减对应的数量和总价实时变化。
-
商品删除
点击删除，删除对应的商品
-
全选功能
-
合计功能
在增减，全选，勾选单一商品，手动改数量，这些情况下都要调用，合计函数。
-
手动改数量功能
这里有个要注意的地方，从键盘获取的val值类型是string，要想进行合计功能，要转换数据类型。parseInt。
-
网友评论