微信小程序之日历组件

日历组件

前段时间写的微信小程序，其中涉及到一个日历打卡页面，可能进行前后月份的切换和左右手势滑动切换月份，切换月份时会有滑动动画，每个日期会有指定的跳转以及各种状态。

布局

页面中布局是一个容器中盛放3个item，分别是上一个月、当前月、下一个月的信息。展示时通过translate方式移动容器，使当前月显示在屏幕可视区域内。

实现思路

每次生成三个月份的信息，渲染到页面。

interface DateDictInfo {
  currentDateMap: DateItemData[][];
  nextDateMap: DateItemData[][];
  prevDateMap: DateItemData[][]
}
private dateDict:DateDictInfo = {
    prevDateMap: [],
    currentDateMap: [],
    nextDateMap: []
  }

获取第一次显示的三个月信息，此时的当前月为

    let currentDate = new Date();
    let year = currentDate.getFullYear();
    //  当前月
    let month = currentDate.getMonth() + 1;
    // 当前星期几
    let day = currentDate.getDay();
    if (day === 0) {
      day = 7;
    }
    // 当前是几号，项目中过去的时间和还未到的事件显示样式不同，需要区分
    let date = currentDate.getDate();

根据当前月份month，计算当前月，month-1，month+1三个月中第一天是周几，以及改月总共天数。

    // 获得当月中第一天是周几,此方法中0=>1月
   let day = new Date(year, month - 1, 1).getDay()
   //获取当月总共有多少天
   let date=new Date(year, month, 0).getDate()

日历是七列的形式，而行数可能是5行或6行

//初始化每个月份的信息
private genInitializeDateDict(key: keyof DateDictInfo，days:number){
   for (let i = 0; i < days; i++) {
      let item: DateItemData = { day: 0 };
      this.dateDict[key].push(itemArr);
    }
}

再将用户每天的打卡数据进行填充渲染

问题

1.手指左右滑动切换月份时，会将日历容器进行位置移动。由于小程序没有dom结构，每次切换后需要重新获取三个月的信息，并且将容器位置移动到初始位置。此时由于数据渲染和容器移动不一定能在同一时间执行，所以会出现闪一下的现象。
2.当手指在日历区域触发touch事件，会触发冒泡事件，页面左右滑动的同时会上下滑动。如果给容器绑定catchtouchsstart和catchtouchend事件，不会冒泡，但是在容器区域内即使上下滑动也不会有任何反应。注意，如果给touchmove类型使用catch绑定，则子元素的tap事件不会被触发。用bind绑定touchmove，才不会影响子元素。

===========================================================================
为解决切换月份出现闪动的问题，小伙伴建议我不要移动容器进行切换，直接移动容器中的item。比如说，现在是从左到右分别是itemA，itemB，itemC，用户看到的是itemB。想切换到上一个月份时即让用户看到itemA时，我们可以将itemA和itemB向右移动，将itemC向左移动至最左侧，此时位置是：itemC，itemA，itemB。而我们计算好新的三个月份的数据后，只将看不到的itemC和itemB进行渲染。因为处于可视区域的itemA没有进行重渲染，也没有进行位移，所以不会出现闪动的情况。
好了，接下来就是如何实现的问题了。如何能让每个item知道自己要移动多少位置，要渲染哪个月份的数据呢？

思考

我们来试着在纸上移动一下，我们先将item移动到初始位置，此时A->prevMonth，B->currentMonth，C->nextMonth。
假设我们现在想一直切换至上一个月份，那么移动的结果就是：C--A-B，B-C--A， A--B--C....
这时我们会发现，每个 item的位移都是有规律的。我们定义手机屏幕宽度为@width，如下图：

image

同理，每次移动之后各个item所对应的是哪个月份的也是有规律的，

此时我们可以将三个item对应的位移和对应的月份进行初始化。

image

其他与之前代码一样，但是此时还是有一个问题，就是监听touchmove事件时，可能由于时间触发过于频繁，所以item在进行位移时感觉每个日期都在颤抖，于是只好取消了touchmove事件，仅保留touchstart和touchend事件，所以无法做到日历跟随手指左右滑动而移动。