选店页顶部日期栏组件实现思路

[qubitsky]

使用说明

店列表页顶部的日期选择栏是一个block级组件

使用示例：

<UIDatePicker
  :allDate="datesArray"
  :actived="dateString"
  :length="5"
  @datePick="datePickAction"
  @calendar="calendarAction"
/>

具有3个属性：

• allDate: 值为从 shop/getMinPriceOfMaintenance 接口取到的全部可订日期列表
• actived: 值当前激活的日期字符串，例如"2017-08-01"
• length: 值为列出的日期数量，可以不传，不传则默认值为5

两个自定义的组件事件：

• datePick: 点击某个日期后触发，会往向事件处理方法传递两个参数dateStr和index
• calendar: 点击日历图标后触发，不传递任何数据

注意！ 当用户点击某个日期后，并不会自动高亮激活相应的日期，需要重设actived属性值，才会激活actived对应的日期

实现思路

交互要求：

• 点击最后一日期时，把日期列表整体左移一个位置，激活点击的日期（在倒数第二个位置）
• 点击第一个日期时，把日期列表整体右移一个位置，激活点击的日期（第二个位置）
• 点击中间其余日期时，只激活点击的日期，不移动日期列表
• 进日历页切换日期后，在第二个位置激活相应日期

假设length属性值为5 为了实现这种交互，先定义了组件内状态

data () {
  return {
    /* 首个日期在allDate数组中的索引，用于计算要展示的5个日期 */
    startIndex: getInitStartIndex(this.allDate, this.actived, this.length),
    /* 用于记住用户点击的日期 */
    pickedDate: null,
    /* 用于记住用户点击日期的相对位置，值为 0 ~ 5 */
    pickedPos: null
  }
}

有一个 computed 数据 list，表示展示的5个日期，由 startIndex 和 length 计算得到， 这样只要更新 startIndex 就能更新这5个日期

重点

watch: {
  actived (val) {
    if (val === this.pickedDate) {
      if (this.pickedPos === this.length - 1) {
        this.startIndex = Math.min(this.startIndex + 1, this.allDate.length - this.length)
      } else if (this.pickedPos === 0) {
        this.startIndex = Math.max(this.startIndex - 1, 0)
      }
    } else {
      this.startIndex = getInitStartIndex(this.allDate, this.actived, this.length)
    }
  }
}

监听 actived 属性值的变化，当 actived 更新，就根据 pickedDate、pickedPos 和 actived 的值去重新计算 startIndex 的值。如果 pickedDate 和 actived 的值一致，就说明是用户点击日期后更新激活项，相应地把 startIndex 加1或减1，如果不一致，就计算 startIndex 使激活的日期放在第二位置。

点击日历图标时，会把 pickedDate 置空