最近一直在做小程序开发。为了实践和工作需要，做了一个类似酒店预订的微信小程序日历插件。上图第一张；本插件分为上下两部分，上半部分是标签栏，会根据当前日期自动定位到当前日期，并显示未来7天的日期，下半部分是内容显示，随着标签栏的变化而变化。思路：先用newData()时间对象初始化时间，得到当前日期，用newDate(Date.UTC(year,month-1,1)).getDay()得到星期几在每个月的第一天。//计算每个月的第一天是星期几functiongetFirstDayOfWeek(year,month){returnnewDate(Date.UTC(year,month-1,1)).getDay();}constdate=newDate();constcur_year=date.getFullYear();constcur_month=date.getMonth()+1;constcur_date=date.getDate();constweeks_ch=['天','一','二','三','四','五','六'];使用构造函数生成数据，后面会用到。//使用构造函数创建对象functioncalendar(date,week){this.date=cur_year+'-'+cur_month+'-'+date;if(date==cur_date){this.week="今天";}elseif(date==cur_date+1){this.week="明天";}else{this.week='week'+week;}}使用for循环生成json数据：for(vari=1;i<=monthLength;i++){//循环完成后，再次初始化循环if(x>6){x=0;}//使用构造函数创建对象that.data.calendar[i]=newcalendar(i,[weeks_ch[x]][0])x++;}这里，因为一周有7天，当x>6的时候，重置为0。最后展示部分源码varthat=this;functiongetThisMonthDays(year,month){returnnewDate(year,month,0).getDate();}}//计算每个月的第一天是星期几functiongetFirstDayOfWeek(year,month){returnnewDate(Date.UTC(year,month-1,1)).getDay();}constdate=newDate();constcur_year=date.getFullYear();constcur_month=date.getMonth()+1;constcur_date=date.getDate();constweeks_ch=['day','one','two','three','four','five','six'];//使用构造函数创建对象functioncalendar(date,week){this.date=cur_year+'-'+cur_month+'-'+date;if(date==cur_date){this.week="今天";}elseif(date==cur_date+1){this.week="明天";}else{this.week='week'+week;}}//当月的天数varmonthLength=getThisMonthDays(cur_year,cur_month)//当月的第一天是星期几？varweek=getFirstDayOfWeek(cur_year,cur_month)varx=week;for(vari=1;i<=monthLength;i++){//当循环结束一周后，初始化并再次循环if(x>6){x=0;}//使用构造函数创建对象that.data.calendar[i]=newcalendar(i,[weeks_ch[x]][0])x++;}//限制要渲染的日历数据天数在7天内（用户体验）varflag=that.data.calendar.splice(cur_date,that.data.calendar.length-cur_date<=7?that.data.calendar.length:7)that.setData({calendar:flag})//设置滚动视图子容器的宽度that.setData({width:186*parseInt(that.data.calendar.length-cur_date<=7?that.data.calendar.length:7)})插件地址：github地址
