小程序实现横向滑动日历效果

2023-08-10 16:24:04 180

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=['日','一','二','三','四','五','六']; //利用构造函数创建对象 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; } } //当前月份的天数 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 }) selectd=flag; //console.log(selectd); varret_id=[]; constlengths=selectd.length for(leti=0;i

CSS:

/*日历开始*/
scroll-view{
height:128rpx;
width:101%;
position:fixed;
top:355rpx;

}
scroll-view.list{
display:flex;
flex-wrap:nowrap;
justify-content:flex-start;
}
scroll-view.listItem{
text-align:center;
width:187rpx;
height:128rpx;
background:#f4f4f4;
padding-top:30rpx;
box-sizing:border-box;
display:inline-block;
}
scroll-view.listItemtext{
display:block;
}
scroll-view.listItem.name{
font-size:25rpx;
}
scroll-view.listItem.date{
font-size:25rpx;
}
scroll-view.current{
background-color:pink;
width:200rpx;
position:relative;
}
scroll-view.currenttext{
color:#fff;
}

更多精彩的日历效果请学习参考专题：javascript日历插件

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

小程序实现横向滑动日历效果

热门推荐

随机推荐