小程序滚动日历组件

小程序滚动日历组件

前段时间产品提出这个需求，要求做一个日历容器，并要求是滚动，不能是那种每个月切换的容器，所以我就在网上大概查找了一下类似组件，滚动的容器较少，于是我就自己写了这个组件，以下是大概的js思路，wxml和css就不附上了，每个UI都有不同的想法

1. 在ready中初始化组件数据

   /**
    * @description: 初始化
    */
   ready() {
     // 这两个数据是从页面中传过来的，起始时间和结束时间
     // 数组类型 [year, month, day]
     const { endDate, startDate } = this.data
     let monthList = [] // 这个用于wxml中遍历，以每月为item
   
     // 未跨年
     if ( endDate[0] === startDate[0]) {
       let rangeMonth = endDate[1] - startDate[1]
       for (let i = 0; i <= rangeMonth; i++) {
         let date = [startDate[0], startDate[1] + i + 1]
         // monthInitData()初始化每月数据
         let days = this.monthInitData(startDate[0], startDate[1] + i)
         monthList.push({
           date,
           days,
         })
       }
     } else {
       // 跨年前月份
       for (let i = 0, lng = 12 - startDate[1]; i < lng; i++) {
         let date = [startDate[0], startDate[1] + i + 1]
         let days = this.monthInitData(startDate[0], startDate[1] + i)
         monthList.push({
           date,
           days,
         })
       }
   
       // 跨年后月份
       for (let i = 0; i <= endDate[1]; i++) {
         let date = [endDate[0], i + 1]
         let days = this.monthInitData(endDate[0], i)
         monthList.push({
           date,
           days,
         })
       }
     }
     this.setData({
       monthList,
     })
   }

2. 初始化每月数据:

   逻辑是获取每个月第一天的星期数和每个月的最大天数，然后在之前和之后的空数据填充item占位
   然后遍历，根据不同的需求，在遍历中处理，最后在html中flex布局即可

   /**
    * @description: 初始化每月数据
    * @param: { number } year 年
    * @param: { number } month 月
    */
   monthInitData(year, month) {
     let { calendarValue, startDate, endDate }= this.data, // 当前点击时间，起始时间，结束时间
       firstWeek = new Date(year, month, 1).getDay(), // 本月的第一天的星期数
       days = [], // 日期数组
       max = this.getMonthMax(year, month + 1), // 每月最大天数
       lastWeek = new Date(year, (month + 1), 0).getDay() // 本月的最后一天的星期数
   
     // 填充每月一号之前的空数据
     if (firstWeek > 0) {
       for (let i = 0; i < firstWeek; i++) {
         days.push({
           day: 0
         })
       }
     }
   
     let currentTime = 0, 
         startTime = 0,
         endTime = 0
   
     if (calendarValue[0]) {
       currentTime = new Date(calendarValue[0], calendarValue[1], calendarValue[2]).getTime()
     }
     if (startDate[0]) {
       startTime = new Date(startDate[0], startDate[1], startDate[2]).getTime()
     }
     if (endDate[0]) {
       endTime = new Date(endDate[0], endDate[1], endDate[2]).getTime()
     }
   
     for (let i = 1; i <= max; i++) {
       // 以下状态是需要在html中判断处理，根据自己需求改变
       let current = false, // 当前点击状态
         disabled = false, // 禁止状态
         now = false, // 今天显示文案
         time = new Date(year, month, i).getTime(),
         nowTime = [new Date().getFullYear(), new Date().getMonth(), new Date().getDate()]
       if (currentTime && currentTime == time) current = true
       if (startTime && startTime > time) disabled = true
       if (endTime && endTime < time) disabled = true
       if (year === nowTime[0] && month === nowTime[1] && i === nowTime[2]) now = true
   
       days.push({
         day: i,
         current,
         disabled,
         now,
       })
     }
   
     // 填充每月最后一天之后的空数据
     if (lastWeek != 6) {
       for (let i = 0, l = (6 - lastWeek); i < l; i++) {
         days.push({
           day: 0
         })
       }
     }
     return days
   },
   
   /**
    * 获取一个月最大天数
    * @method getMonthMax
    * @param: { number } year 年份
    * @param: { number } month 月份
    */
   getMonthMax(year, month) {
     let max = 31
     if (month == 4 || month == 6 || month == 9 || month == 11) {
       max = 30
     } else if (month == 2) {
       if (((year % 4) == 0 && (year % 100) > 0) || (year % 400) == 0) {
         max = 29
       } else {
         max = 28
       } 
     }
   
     return max
   },
   

• 以上就是核心逻辑，像一些弹窗事件和一些点击事件就不附上来了