小程序之日历（状态版）

在之前普通版本的前提下添加了一个日历显示对应状态的版本

日历结构如图所示：

小程序之日历（状态版）

==》状态根据条件判断是否渲染。

数据结构依旧：但是dateArr里的项变为对象{}了，而不是单纯的存日历号数。

小程序之日历（状态版）

这里我假设了一个后台传来的数据：

小程序之日历（状态版）

对应初始化数据：

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

date: ['日', '一', '二', '三', '四', '五', '六'],

dateArr: []

onLoad: function () {

this.dateInit();

dateInit: function () {

let dateArr = []; //需要遍历的日历数组数据

let arrLen = 0; //dateArr的数组长度

let now = new Date();

let year = now.getFullYear();

let nextYear = 0;

let month = now.getMonth(); //没有+1方便后面计算当月总天数

let nextMonth = (month + 1) > 11 ? 1 : (month + 1);

let startWeek = new Date(''+year+','+ (month + 1)+',1').getDay(); //目标月1号对应的星期

let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天

let obj = {}; //保存日的相关状态

let status = [

{ one: true, two: false },

{ one: true, two: true },

{ one: false, two: false },

{ one: false, two: true },

{ one: false, two: false },

{ one: false, two: false }

]; //假设这是个从后台传来的目标月的所有状态(这里设定3月--31天)

if (month + 1 > 11) {

nextYear = year + 1;

dayNums = new Date(nextYear, nextMonth, 0).getDate();

}

arrLen = startWeek + dayNums;

for (let i = 0; i < arrLen; i++) {

if (i >= startWeek) {

obj = {

num: i - startWeek + 1,

status1: status[i - startWeek].one,

status2: status[i - startWeek].two

}

dateArr[i] = obj;

obj = {};

} else {

dateArr[i] = '';

}

this.setData({

dateArr: dateArr

})

}

})

与普通版有区别的就是红色字体部分了！