秒杀模块的实现思路

最近新做了个h5活动页面的秒杀模板，样式类似于日期是一个tab的列表，时间是一个tab的列表，商品是一个可以左右滑动的列表，结构从上到下排列。这里具体的代码就不贴了，简单介绍下实现的思路。

 

实现原理

处理页面的显示逻辑即是处理数据。当页面初始化时，遍历秒杀商品的数据列表，每个商品和分割线的宽度是固定的，这时可以计算出每个商品的offsetLeft值，保存在商品对象中。（或者也可以等DOM节点渲染好后，遍历商品的节点，获得每个商品的offsetLeft值，但是这种方法需要浏览器操作DOM节点，相比于直接处理数据，性能可能会差些）这个offsetLeft值用于后面商品滑动时的定位。

秒杀组件基本上没有太过于复杂的交互逻辑，难点即是商品定位和时间日期定位。包括两处：

1. 点击指定的日期或时间，商品区域滑动到该场次对应商品的位置。

点击日期或时间时，可以拿到日期或时间的索引值，根据这个值可以找出对应场次的第一个商品，获得该商品的offsetLeft值，然后将商品区域的scrollLeft值设为该商品的offsetLeft值。即可滑动到该商品所在的位置。中间用到了动画过渡效果，使滑动的过程比较平滑。

2. 滑动商品区域，计算出页面中显示商品所在的日期和时间，并给相应的日期和时间加上状态。

滑动商品时，调用scroll方法，使用函数节流控制scroll事件触发的频率,此处有两个方法，1：遍历视图区第一个商品节点的getBoundingClientRect().left值来定位。2：判断商品区域的scrollLeft的值是在哪两个秒杀场次的offset值的区间内，此处采用第二种做法。确定好对应的秒杀场次后，日期和时间的值也就出来了。这时如果日期和时间不在浏览器的可见区域内，则要移动至可见区域。

点击日期或时间，商品的滑动还未停止时，这时商品区域是没有绑定scroll事件的。