微信小程序日历组件使用方法详解

2023-09-02 03:33:06 67

//pages/components/calender.js Component({ data:{ weekArr:["日","一","二","三","四","五","六"], yearMonth:[], rowNum:"", dateArr:[], currentMonth:"", year:"", weekNum:"" }, created:function(){}, attached:function(){ letT=newDate() this.setData({ currentMonth:T.getMonth()+1, year:T.getFullYear() }) //判断闰年 letyeartype=(this.data.year%4==0)&&(this.data.year%100!=0||this.data.year%400==0) if(yeartype){ this.setData({ yearMonth:[31,29,31,30,31,30,31,31,30,31,30,31] }) }else{ this.setData({ yearMonth:[31,28,31,30,31,30,31,31,30,31,30,31] }) } letcurrentMonthDay=this.data.year+"-"+this.data.currentMonth+"-01" letweekStr="" this.setData({ weekNum:newDate(currentMonthDay).getDay(), rowNum:Math.ceil((this.data.yearMonth[this.data.currentMonth]+newDate(currentMonthDay).getDay())/7) }) for(leti=0;i

wxss

/*pages/components/calender.wxss*/
.operate{
width:100%;
display:flex;
flex-direction:row;
justify-content:space-around;
font-size:32rpx;
color:#000;
padding-bottom:40rpx;
}
.year{
padding:030%;
display:flex;
flex-direction:row;
justify-content:space-around;
font-size:32rpx;
color:#404040;
margin-bottom:40rpx;
}
.calender{
display:flex;
flex-direction:column;
padding:04.5%;
width:91%;
border-top:1rpxsolid#eaeaea;
padding-top:30rpx;
color:#404040;
}
.calender.week{
display:flex;
flex-direction:row;
}
.calender.weektext{
width:14%;
text-align:center;
font-size:26rpx;
}
.calender.datetext{
width:14%;
display:inline-block;
text-align:center;
font-size:26rpx;
color:#000;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序日历组件使用方法详解

热门推荐

随机推荐