258资源分享网

模仿“优优老师APP”的课程日历实现的Demo，只显示当月 和下个月两个月的日期，会根据不同类型的日期类型显示不一样的样式，在wx-swiper组件中动态添加了datePad，会根据要显示月份的日 ...

模仿“优优老师APP”的课程日历实现的Demo，只显示<当月> 和<下个月>两个月的日期，会根据不同类型的日期类型显示不一样的样式，在wx-swiper组件中动态添加了datePad，会根据要显示月份的日期动态确定日期表格是4，5，还是6行，并动态改变swiper的高度,本月的第一天默认选中状态，下个月的第一天默认是选中状态。 
 

［效果展示］

［目录结构］

img：本地icon文件文件夹

course：课程日历代码的目录

utils：工具类文件夹

app.*：微信小程序全局配置文件

［贴代码］

course.wxml

[html] view plain copy

<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">