<强>微信小程序可滑动月日历组件
此日历可进行左右滑动,展示签到打卡信息,和大家分享一下。
如果样式变形,请检查是否有共用样式起冲突
展示一下效果图
在组件组件文件夹下新建calendarMonth文件夹
直接上代码吧:
index.wxml
& lt; !——组件/日历/index.wxml——比;
& lt;视图类='月'比;
& lt; !——& lt;视图类=凹贰眀indtap=皃revMonth”在《& lt;/view>——比;
& lt; view>
& lt;选择模式="日期" value=" https://www.yisu.com/zixun/{{日期}}”开始=2015 - 09年“结束=?020 - 09”字段=隆痓indchange=癰indDateChange”比;
& lt;视图比;
{{日期}}
& lt;/view>
& lt;/picker>
& lt;/view>
& lt; !——& lt;视图类=凹贰眀indtap=nextMonth的祝辞》& lt;/view>——比;
& lt;/view>
& lt;视图类=叭萜鳌北?
& lt;视图类=叭绽鷉lex列中心”在
& lt;视图类=' week-row flex m-around wid100的祝辞
& lt;视图类=巴瘛钡奶炱?为=皗{周}}”天气:关键=跋钅俊痹趝{项}}& lt;/view>
& lt;/view>
& lt;偷窃者类=' swpier-box '圆=" true "当前=" {{swiperIndex}} " bindchange=swiperChange的祝辞
& lt; swiper-item类=' flex m-around days-table的祝辞
& lt;观点wx:="{{日历。第一}}”天气:项=' x '天气:关键=皒.date”
类='网格fw {{x。月===月# 63;””:“notCurrent "}} {{x。===日期整理# 63;"今天":" "}}{{x。日期==beSelectDate & # 63;"选择":" "}}{{x data-month=Ｔ聖}{{x data-day=Ｌ靰}{{x数据日期=Ｈ掌趠}’bindtap=' bindDayTap '比;
& lt;视图类{{x.year +='视图”——“+ x.month +“-”+ x。一天===日期+ " -01 " & # 63;“choice2”:“在{{x}}”。===日期整理# 63,“今天”:x.day}} & lt;/view>
& lt;块wx:如果=" {{workerClockData.length> 0}}”在
& lt;观点wx:=" {{workerClockData}}”天气:关键=皗{指数}}”比;
& lt;文本类=癲a”天气:如果=" {{x.year +“-”+ x.month +“-”+ x.day==item.clockDate}}”在记& lt;/text>
& lt;文本类=' da2'wx:如果=" {{x.year +“-”+ x.month +“-”+ x.day==item.clockDate}}“祝辞+ {{item.actualDayWage}} & lt;/text>
& lt;/view>
& lt;/block>
& lt;/view>
& lt;/swiper-item>
& lt; swiper-item类=' flex m-around days-table的祝辞
& lt;观点wx:="{{日历。第二}}”天气:项=' x '天气:关键=皒.date”
类='网格fw {{x。月===月# 63;””:“notCurrent "}} {{x。===日期整理# 63;"今天":" "}}{{x。日期==beSelectDate & # 63;"选择":" "}}{{x data-month=Ｔ聖}{{x data-day=Ｌ靰}{{x数据日期=Ｈ掌趠}的测试数据={{(年+”——“+月+”——“+天)}}' bindtap=bindDayTap的祝辞
& lt;视图类{{x.year +='视图”——“+ x.month +“-”+ x。一天===日期+ " -01 " & # 63;“choice2”:“在{{x}}”。===日期整理# 63,“今天”:x.day}} & lt;/view>
& lt;块wx:如果=" {{workerClockData.length> 0}}”在
& lt;观点wx:=" {{workerClockData}}”天气:关键=皗{指数}}”比;
& lt;文本类=癲a”天气:如果=" {{x.year +“-”+ x.month +“-”+ x.day==item.clockDate}}”在记& lt;/text>
& lt;文本类=' da2'wx:如果=" {{x.year +“-”+ x.month +“-”+ x.day==item.clockDate}}“祝辞+ {{item.actualDayWage}} & lt;/text>
& lt;/view>
& lt;/block>
& lt;/view>
& lt;/swiper-item>
& lt; swiper-item类=' flex m-around days-table的祝辞
& lt;观点wx:="{{日历。第三}}”天气:项=' x '天气:关键=皒.date”
类='网格fw {{x。===日期整理# 63;"今天":" "}}{{x。日期==beSelectDate & # 63;"选择":" "}}{{x data-month=Ｔ聖}{{x data-day=Ｌ靰}{{x数据日期=Ｈ掌趠}’bindtap=' bindDayTap '比;
& lt;视图类{{x.year +='视图”——“+ x.month +“-”+ x。一天===日期+ " -01 " & # 63;choice2 ": " "}} {{x。月===月# 63;”“:”notCurrent}}在{{x。===日期整理# 63,“今天”:x.day}} & lt;/view>
& lt;块wx:如果=" {{workerClockData.length> 0}}”在
& lt;观点wx:=" {{workerClockData}}”天气:关键=皗{指数}}”比;
& lt;文本类=癲a”天气:如果=" {{x.year +“-”+ x.month +“-”+ x.day==item.clockDate}}”在记& lt;/text>
& lt;文本类=' da2'wx:如果=" {{x.year +“-”+ x.month +“-”+ x.day==item.clockDate}}“祝辞+ {{item.actualDayWage}} & lt;/text>
& lt;/view>
& lt;/block>
& lt;/view>
& lt;/swiper-item>
& lt; swiper-item类=' flex m-around days-table的祝辞
& lt;观点wx:="{{日历。第四}}“天气:项=' x '天气:关键=皒.date”
类='网格fw {{x。月===月# 63;””:“notCurrent "}} {{x。===日期整理# 63;"今天":" "}}{{x。日期==beSelectDate & # 63;"选择":" "}}{{x data-month=Ｔ聖}{{x data-day=Ｌ靰}{{x数据日期=Ｈ掌趠}’bindtap=' bindDayTap '比;
& lt;视图类{{x.year +='视图”——“+ x.month +“-”+ x。一天===日期+ " -01 " & # 63;“choice2”:“在{{x}}”。===日期整理# 63,“今天”:x.day}} & lt;/view>
& lt;块wx:如果=" {{workerClockData.length> 0}}”在
& lt;观点wx:=" {{workerClockData}}”天气:关键=皗{指数}}”比;
& lt;文本类=癲a”天气:如果=" {{x.year +“-”+ x.month +“-”+ x.day==item.clockDate}}”在记& lt;/text>
& lt;文本类=' da2'wx:如果=" {{x.year +“-”+ x.month +“-”+ x.day==item.clockDate}}“祝辞+ {{item.actualDayWage}} & lt;/text>
& lt;/view>
& lt;/block>
& lt;/view>
& lt;/swiper-item>
& lt;/swiper>
& lt;/view>
& lt;/view>
