模仿“优优老师APP”的课程日历实现的Demo，只显示<当月> 和<下个月>两个月的日期，会根据不同类型的日期类型显示不一样的样式，在wx-swiper组件中动态添加了datePad，会根据要显示月份的日期动态确定日期表格是4，5，还是6行，并动态改变swiper的高度,本月的第一天默认选中状态，下个月的第一天默认是选中状态。
［效果展示］
［目录结构］
img：本地icon文件文件夹
course：课程日历代码的目录
utils：工具类文件夹
app.*：微信小程序全局配置文件
［贴代码］
course.wxml
-
<view class="container" style="background:#fff">
-
<view class="container-hang" style="margin-top:23rpx;width:auto">
-
<text wx:for="{{dateTitles}}" wx:for-item="dateItem" class="cellDate"
-
style="width:{{titleCellWidth}}px;padding:6rpx 0 6rpx 0">{{dateItem}}</text>
-
</view>
-
-
<swiper bindchange="swiperChange" class="swipter-box" duration="300" style="height:{{swiperHeight}}rpx">
-
<swiper-item wx:for="{{monthDatas}}" wx:for-item="monthData">
-
-
<view class="cell-box" wx:for="{{monthData.dataHarr}}" wx:for-index="i">
-
<view wx:for="{{[0, 1, 2, 3, 4, 5, 6]}}" wx:for-index="j">
-
<view class="contentDate" style="width:{{dateCellWidth}}px;height:{{dateCellHeight}}rpx">
-
<view class="type_no_1_pad" wx:if="{{monthData.data[i*7 + j].type == -1}}">
-
<text class="type_no_1">{{monthData.data[i*7 + j].dateShow}}</text>
-
</view>
-
<view class="type_1_pad" wx:if="{{monthData.data[i*7 + j].type == 1}}">
-
<text class="type_1">{{monthData.data[i*7 + j].dateShow}}</text>
-
</view>
-
<view class="type_2_pad" wx:if="{{monthData.data[i*7 + j].type == 2}}">
-
<text class="type_2">{{monthData.data[i*7 + j].dateShow}}</text>
-
</view>
-
</view>
-
</view>
-
</view>
-
-
-
</swiper-item>
-
</swiper>
-
-
<text style="width:{{windowWidth}}px;height:2rpx;background-color:#bdbdbd" />
-
-
<view style="display:flex;flex-direction:column;background:#fff;margin-top:53rpx;align-items:center">
-
<image src="{{noclass_icon}}" style="width:105rpx;height:105rpx" />
-
<text style="color:#d9d9d9;font-size:33rpx;margin-top:21rpx">今天没有课程哦~</text>
-
</view>
-
</view>
course.js:
