猫耳FM日期窗口实现

猫耳FM日期窗口实现

今天咱们继续来研究一下FM中 “精品周更” 的窗口滑动模型，这个模型比较新颖，但是只要找到规律后其实并复杂。

按照惯例，先来看看官方的效果图

再来看看模型最终实现效果图

我们可以发现，展示的item有6组，各组中的成员个数都不同，并且当有相应的组正在展示时，对应的标题才会出现，还可以发现比较有意思的是，有时候相应的标题并不会一直都与其下方的itemList保持相对的位置，有时候itemList发生了移动，但是标题并没有移动。是不是很有意思？别怕，其实只要你认真分析其中的规律，你会发现也就那样。

在这之前我们必须要确定好几个关系

1. 不同档期类型之间的关系
2. 展示item之间的关系
3. itemList 与 日期标题栏的关系
4. 日期标题之间的关系

一、不同档期类型之间的关系

不同档期类型之间在展示效果上并无任何的差别，都是排列在同一行，如何区别不同的档期的item，可以使用class属性来进行标识。

      <div class="class1 item"></div>
      <div class="class1 item"></div>
      <div class="class1 item"></div>
      <div class="class2 item"></div>
      <div class="class2 item"></div>
      <div class="class2 item"></div>
      <div class="class2 item"></div>
      <div class="class3 item"></div>
      <div class="class3 item"></div>
      <div class="class3 item"></div>
      <div class="class4 item"></div>
      <div class="class4 item"></div>
      <div class="class5 item"></div>
      <div class="class5 item"></div>
      <div class="class5 item"></div>
      <div class="class5 item"></div>
      <div class="class5 item"></div>
      <div class="class5 item"></div>

二、展示item之间的关系

由于各个item的展示只需左右并排移动若干个，所以我们可以直接将所有的item都并排在一行，每次移动直接移动一整行。

三、itemList 与 日期标题栏的关系

itemList的移动会影响日期标题，但是我们不能直接使用html结构把两者绑定起来，因为 itemList 与 日期标题的相对位置并非一直不变的，在移动itemList时需要使用一定的逻辑动态计算各个标题的下一个目标位置

    <div class="titles">
      <span class="title1 title">今天 7.3</span>
      <span class="title2 title">明天 7.4</span>
      <span class="title3 title">后天 7.5</span>
      <span class="title4 title">星期二 7.6</span>
      <span class="title5 title">星期三 7.7</span>
      <span class="title5 title">星期四 7.8</span>
    </div>
    <div class="itemList" id="itemList" style="left:0px;">
      <div class="class1 item">