日历签到，滑动日历

 先讲思路

首先要做出一个这样的日历。

拿到本页日历中所有天数格子的数据，因为每个月不可能都是从周日开始到周六结束，所以这个时候就需要我们去计算上月残余天数和下月残余天数

上月残余：本月第一天从周几开始上月残余就有几天

下月残余：本月日历天数格子总数 - 上月残余天数 - 本月天数

本月日历天数格子总数： 上月残余 + 本月天数大于35就是42个格子，小于35就是35个格子

上月残余 + 本月天数 + 下月残余就组成了当前月日历的数据

 

接下来就是签到数据和日历数据的组装 

先上数据格式--月对象的数据格式

date:每一天的数据

month:月

selectedDate: 当前月选中的日期

year:年

{
date: []
month: ''
selectedDate: ''
year: ''
}

 这一部分简单来说，就是获取用户的签到数据，跟日历的数据进行匹配，最终组合出日历和签到数据的结构

 天对象的数据格式

month: 代表那个月"current"当月"pre"上月"next"下月

repair： 代表需要补签

signed： 代表已签到

{
date: 23
month: "current"
repair: true
signed: false
}

 日历滑动部分，为了优化滑动效果使用了swiper，一次获取三个月，本月上月和下月

  OK，下面直接上代码

滑动日历组件

父组件中引用

wxml:

<calendar bind:sendObj="getObj" currentPunchCardDate="{{punchCardDateArr}}"></calendar>

getObj：用于接收日历组件传回的数据（当切换月份时会给父组件回调）

punchCardDateArr： 传给子组件的签到数据

数据结构：{

date: 13

month: 11

year: 2024

}

js:

// 获取子组件的数据
  getObj(e) {
    console.log("获取子组件的数据", e);
    this.setData({
      currentDate: e.detail.currentDate,
      currentMonth: e.detail.currentMonth,
      currentYear: e.detail.currentYear,
    })
//获取签到数据的接口
    this.getHabitInfo(e.detail.currentYear, e.detail.currentMonth)
  },

至此，签到日历就完成了，如有问题欢迎打扰