小程序中动态改变月历数组的数据

最新推荐文章于 2024-04-08 10:06:29 发布

怪哈哈

最新推荐文章于 2024-04-08 10:06:29 发布

阅读量144

点赞数

分类专栏：小程序 js

本文链接：https://blog.youkuaiyun.com/guairena/article/details/118146666

版权

小程序同时被 2 个专栏收录

24 篇文章

订阅专栏

10 篇文章

订阅专栏

这篇博客介绍了一个JavaScript实现，用于根据当前日期动态生成从2017年1月到当前年当前月的月历数据结构。数据结构包括年份作为一个大对象，每个年份下有月份数组，每个月份包含月名、ID和一个布尔值。代码首先初始化了从2017年开始的数据，然后根据当前年份和月份进行填充，确保包含了所有缺失的年份和月份，最后更新到页面数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：
月历循环2017年1月至当前年当前月

数组结构如下：

// 想要的格式是  
// serviceTypes该数组需要显示2017年1月至当前年当前月 
// 每一年都是个大对象{ type: '2021年',id: '2021',services: []}
// services该数组是该年的所有月份，如果是当前年则显示到当前月份 serviceTypes: [
      {
        type: '2021年',
        id: '2021',
        services: [
          {
            name: '6月',
            id: '202106',
            check: false,
          },
          {
            name: '5月',
            id: '202105',
            check: false,
          },
          {
            name: '4月',
            id: '202104',
            check: false,
          },
          {
            name: '3月',
            id: '202103',
            check: false,
          },
          {
            name: '2月',
            id: '202102',
            check: false,
          },
          {
            name: '1月',
            id: '202101',
            check: false,
          },
        ],
      },
      // ....... 省略中间的年份
      {
        type: '2017年',
        id: '2017',
        services: [
          {
            name: '12月',
            id: '201712',
          },
          {
            name: '11月',
            id: '201711',
          },
          {
            name: '10月',
            id: '201710',
          },
          {
            name: '9月',
            id: '201709',
          },
          {
            name: '8月',
            id: '201708',
          },
          {
            name: '7月',
            id: '201707',
          },
          {
            name: '6月',
            id: '201706',
          },
          {
            name: '5月',
            id: '201705',
          },
          {
            name: '4月',
            id: '201704',
          },
          {
            name: '3月',
            id: '201703',
          },
          {
            name: '2月',
            id: '201702',
          },
          {
            name: '1月',
            id: '201701',
          },
        ],
      },
    ],

具体实现：

Page({

  /**
   * 页面的初始数据
   */
  data: {
	// 首先定义数组的基本结构，要把最早的开始月份写上即可
	serviceTypes: [
		{
	        type: '2017年',
	        id: '2017',
	        services: [
	          {
	            name: '1月',
	            id: '201701',
	          },
	        ],
	     },
	  ]
    }
	formatMonth: function (month) {
	    return month < 10 ? `0${month}` : month
	},
	getServiceTypes: function () {
	    const currentData = new Date()
	    const year = currentData.getFullYear()
	    let month = currentData.getMonth() + 1
	    month = this.formatMonth(month)
	    let serviceTypes = this.data.serviceTypes
	    // 判断是否含有当前年，有的话返回true
	    const flag1 = serviceTypes.some((item) => Number(item.id) === year)
	    // 如果为false没有当前年
	    if (!flag1) {
	      // 用当前年2021-2017 看间隔了多少年
	      const jiange1 = year - serviceTypes[0].id
	      // 如果间隔大于0则获取当前数组中第一个对象的最后一月
	      // 将现有的年的月份补齐
	      if (jiange1 > 0) {
	        // 获取当前数组最前面年中的最后一月，补齐12月
	        const lastYear = serviceTypes[0].services[0].id.substr(0, 4)
	        const lastMonth = serviceTypes[0].services[0].id.substr(4, 2)
	        const jiangeyue = 12 - lastMonth
	        for (let i = 1; i <= jiangeyue; i++) {
	          // 向数组的开头添加元素
	          serviceTypes[0].services.unshift({
	            name: `${Number(lastMonth) + i}月`,
	            id: `${lastYear}${this.formatMonth(Number(lastMonth) + i)}`,
	            check: false
	          })
	        }
	      }
	
	      // 如果间隔超过一年，则把除了当前年之外的年补齐 如当前年是2021  补齐 2018、2019、2020
	      // 首先取到serviceTypes数组中第一个对象的年份
	      // 通过for循环 如间隔4年 则循环3次 每次在数组最前面加入一个年份
	      // 每次在数组前加入的都是最新的数据，则给serviceTypes[0].services该数组添加1到12月
	      if (jiange1 > 1) {
	        for (let i = 1; i <= jiange1 - 1; i++) {
	          const lastYear =  Number(serviceTypes[0].services[0].id.substr(0, 4))
	          serviceTypes.unshift({
	            type: `${lastYear + 1}年`,
	            id: `${lastYear + 1}`,
	          })
	          serviceTypes[0].services = []
	          for (let j = 1; j <= 12; j++) {
	            serviceTypes[0].services.unshift({
	              name: `${j}月`,
	              id: `${serviceTypes[0].id}${this.formatMonth(j)}`,
	            })
	          }
	          
	        }
	      }
	      // 最后给大数组添加当前年，并补齐该年的1月到当前月
	      serviceTypes.unshift({
	        type: `${year}年`,
	        id: `${year}`,
	      })
	      // 补齐当前年1月到当前月
	      serviceTypes[0].services = []
	      for (let i = 1; i <= month; i++) {
	        serviceTypes[0].services.unshift({
	          name: `${i}月`,
	          id: `${year}${this.formatMonth(i)}`,
	          check: false
	        })
	      }
	    } else { // 如果有当前年，则只需要补齐当前年的月份即可
	      const lastMonth = serviceTypes[0].services[0].id.substr(4, 2) //数组中最后一月
	      const jiangeyue = month - lastMonth
	      for (let i = 1; i <= jiangeyue; i++) {
	        serviceTypes[0].services.unshift({
	          name: `${Number(lastMonth) + i}月`,
	          id: `${year}${this.formatMonth(Number(lastMonth) + i)}`,
	          check: false
	        })
	      }
	    }
	    this.setData({
	      "serviceTypes": serviceTypes
	    })
	    // console.log('serviceTypes', serviceTypes)
	},
	onLoad: function (options) {
		this.getServiceTypes()
	}
})