最近新做了個h5活動頁面的秒殺模板，樣式類似於日期是一個tab的列表，時間是一個tab的列表，商品是一個可以左右滑動的列表，結構從上到下排列。這里具體的代碼就不貼了，簡單介紹下實現的思路。
實現原理
處理頁面的顯示邏輯即是處理數據。當頁面初始化時，遍歷秒殺商品的數據列表，每個商品和分割線的寬度是固定的，這時可以計算出每個商品的offsetLeft值，保存在商品對象中。（或者也可以等DOM節點渲染好后，遍歷商品的節點，獲得每個商品的offsetLeft值，但是這種方法需要瀏覽器操作DOM節點，相比於直接處理數據，性能可能會差些）這個offsetLeft值用於后面商品滑動時的定位。
秒殺組件基本上沒有太過於復雜的交互邏輯，難點即是商品定位和時間日期定位。包括兩處：
1. 點擊指定的日期或時間，商品區域滑動到該場次對應商品的位置。
點擊日期或時間時，可以拿到日期或時間的索引值，根據這個值可以找出對應場次的第一個商品，獲得該商品的offsetLeft值，然后將商品區域的scrollLeft值設為該商品的offsetLeft值。即可滑動到該商品所在的位置。中間用到了動畫過渡效果，使滑動的過程比較平滑。
2. 滑動商品區域，計算出頁面中顯示商品所在的日期和時間，並給相應的日期和時間加上狀態。
滑動商品時，調用scroll方法，使用函數節流控制scroll事件觸發的頻率,此處有兩個方法，1：遍歷視圖區第一個商品節點的getBoundingClientRect().left值來定位。2：判斷商品區域的scrollLeft的值是在哪兩個秒殺場次的offset值的區間內，此處采用第二種做法。確定好對應的秒殺場次后，日期和時間的值也就出來了。這時如果日期和時間不在瀏覽器的可見區域內，則要移動至可見區域。
點擊日期或時間，商品的滑動還未停止時，這時商品區域是沒有綁定scroll事件的。