介绍 & lt; scroll-view 类=皊croll-view_H", scroll-x>
,& lt; view 类=& # 39;列表# 39;,风格=& # 39;宽度:{{,width }} rpx # 39;比;
& lt;才能view bindtap=把≡瘛?天气:为=皗{,calendar }},,天气:关键=啊?天气:项=癷tem",天气:对于指数=癷ndex",材料指数=皗{,index }}“,类=& # 39;listItem {{指数==currentIndex ?,“current":““}} & # 39;比;
& lt;才能text 类=& # 39;名字# 39;在{{,item.week }} & lt;/text>
& lt;才能text 类=& # 39;日期# 39;在{{,item.date }} & lt;/text>
& lt;才能/view>
,& lt;/view>
& lt;/scroll-view> function getThisMonthDays(年,月),{
return 才能;new 日期(年,月,0).getDate ();
,}
,//计算每月第一天是星期几
,function getFirstDayOfWeek(年,月),{
return 才能;new 日期(Date.UTC (,, month 作用;1,1)).getDay ();
,}
,const date =, new 日期();
,const cur_year =, date.getFullYear ();
,const cur_month =, date.getMonth (), +, 1;
,const cur_date =, date.getDate ();
,const weeks_ch =,(& # 39;日& # 39;,,& # 39;一& # 39;,,& # 39;二& # 39;,,& # 39;三& # 39;,,& # 39;四& # 39;,,& # 39;五& # 39;,,& # 39;六& # 39;];
,//利用构造函数创建对象
日历,function (日期,周),{
this.date 才能=,cur_year +, & # 39; & # 39;, +, cur_month +, & # 39; & # 39;, +,日期;
if 才能;(date ==, cur_date), {
this.week =,才能“今天“;
,,},else if (date ==, cur_date +, 1), {
this.week =,才能“明天“;
,,},{else
时间=this.week 才能;& # 39;星期& # 39;,+,一周;
,,}
,}
,//当前月份的天数
,var monthLength =, getThisMonthDays (cur_year, cur_month)
,//当前月份的第一天是星期几
,var week =, getFirstDayOfWeek (cur_year, cur_month)
,var x =,一周;
,for (var 小姐:=,1;,小姐:& lt;=, monthLength;,我+ +),{//当才能循环完一周后,初始化再次循环
if 才能;(x 祝辞,6),{
时间=x 才能;0;
,,}//利才能用构造函数创建对象
that.data.calendar才能[我],=,new 日历(我,[weeks_ch [x]] [0])
,,x + +;
,}
,//限制要渲染的日历数据天数为7天以内(用户体验)
,var flag =, that.data.calendar.splice (cur_date, that.data.calendar.length 作用;cur_date & lt;=, 7, ?, that.data.calendar.length :, 7)
,that.setData ({
日历:才能国旗
,})=,selectd 旗帜;
,//console.log (selectd);
,var ret_id =, [];
,const lengths =selectd.length
,for (let 小姐:=,0;,小姐:& lt;,长度;,我+ +),{
ret_id才能[我],=,selectd[我].date;
,}=,,choosedate ret_id [0];
,//设置滚动视图的子容器的宽度
,that.setData ({
,,宽度:186,*,方法(that.data.calendar.length 作用;cur_date & lt;=, 7, ?, that.data.calendar.length :, 7)
之前,}) /*日历开始,*/滚动视图{
,身高:128 rpx;
,宽度:101%;
,位置:固定;
,最高:355 rpx;
,
}
scroll-view .list {
,显示:flex;
,flex-wrap: nowrap;}
,justify-content: flex-start;
}
scroll-view .listItem {
,text-align:中心;
,宽度:187 rpx;
,身高:128 rpx;
,背景:# f4f4f4;
,padding-top: 30 rpx;
,box-sizing: border-box;
,显示:inline-block;
}
{scroll-view .listItem 文本
,显示:块;
}
scroll-view .listItem . name {
,字体大小:25 rpx;
}
scroll-view .listItem .date {
,字体大小:25 rpx;
}
scroll-view .current {
,背景颜色:粉色;
宽度:200 rpx;才能
,位置:相对;
}
{scroll-view .current 文本
,颜色:# fff;
}
今天就跟大家聊聊有关怎么在小程序中实现一个横向滑动日历效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
具体内容如下
js:,
CSS:
看完上述内容,你们对怎么在小程序中实现一个横向滑动日历效果有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
