实现类似饿了么列表滚动侦听以及加入购物车动画和图片懒加载功能

qq_33503025

于 2018-03-13 11:55:10 发布

阅读量1.6k

点赞数 1

文章标签：移动端列表滚动图片懒加载购物车

本文链接：https://blog.csdn.net/qq_33503025/article/details/79538579

版权

本文详细介绍了如何实现移动端商城页面的功能优化，包括：1)滑动右侧商品列表时，左侧分类自动高亮；2)点击分类时，右侧列表滑动到对应位置；3)图片懒加载技术的应用；4)添加购物车时的动画效果。通过监听touch事件、计算元素位置和使用animate方法，实现了流畅的用户体验和性能优化。

摘要由CSDN通过智能技术生成

  修改商城页面， 

  1.实现滑动右边商品列表时，左边的商品分类能根据当前显示的商品类型自动改变样式。 

  2.点击左边的商品分类，右边的商品列表可以滑动到对应商品的位置。 

  3.实现图片懒加载功能， 

  4.实现添加购物车动画。 

  用到的方法以及问题： 

  思路： 

  1.利用touchmove和touchend事件，滑动过程中调用slide（）方法，slide方法监听每个商品分类对应的列表div距顶部的距离，当某一分类到达顶部的时候，改变左边样式。 

  主要方法： 

  //屏幕滑动改变商品分类列表样式 

  var $sections = $('.goods');//右侧商品分类对应的div 

  var $navs = $('.shangpinglan li'); //左侧商品类别 

  var len = $sections.length - 1;//分类个数 

  for (; len > -1; len--) { 

  var that = $sections.eq(len);//某一分类商品对应的div 

  var good_height = $(".balishuigundong>div>:last").get(0).getBoundingClientRect().height;// 
 单个商品框的高度 

  var lg = $(that).find(".balishui2").length;//当前分类商品个数总量 

  if ((that.offset().top)<heightY+1 && (that.offset().top)> (heightY - good_height*lg)) { 

  //处理，改变样式 

  break; 

}

}

  主要是要计算距离，获取元素高度： 

 
 height() = height(100) = 100 

 
 innerHeight() = height(100) + padding(10*2) 

 
 outerHeight() = height(100) + padding(10*2) + border(1*2) 

关注