欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 教程

微信小程序开发－模仿“优优老师”课程日历

发布：2017-11-28 17:28浏览： 次来源：网络 作者：tianshu

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

 
 
 

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

［效果展示］

微信小程序开发－模仿“优优老师”课程日历(图1)

［目录结构］

微信小程序开发－模仿“优优老师”课程日历(图2)

img：本地icon文件文件夹

course：课程日历代码的目录

utils：工具类文件夹

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

［贴代码］

course.wxml

 

[html] view plain copy
 
  1. <view class="container" style="background:#fff">  
  2.     <view class="container-hang" style="margin-top:23rpx;width:auto">  
  3.         <text wx:for="{{dateTitles}}" wx:for-item="dateItem" class="cellDate"  
  4.         style="width:{{titleCellWidth}}px;padding:6rpx 0 6rpx 0">{{dateItem}}</text>  
  5.     </view>  
  6.       
  7.     <swiper bindchange="swiperChange" class="swipter-box" duration="300" style="height:{{swiperHeight}}rpx">  
  8.         <swiper-item wx:for="{{monthDatas}}" wx:for-item="monthData">  
  9.   
  10.             <view class="cell-box" wx:for="{{monthData.dataHarr}}" wx:for-index="i">  
  11.                 <view wx:for="{{[0, 1, 2, 3, 4, 5, 6]}}" wx:for-index="j">  
  12.                     <view class="contentDate" style="width:{{dateCellWidth}}px;height:{{dateCellHeight}}rpx">  
  13.                         <view class="type_no_1_pad" wx:if="{{monthData.data[i*7 + j].type == -1}}">  
  14.                             <text class="type_no_1">{{monthData.data[i*7 + j].dateShow}}</text>  
  15.                         </view>  
  16.                         <view class="type_1_pad" wx:if="{{monthData.data[i*7 + j].type == 1}}">  
  17.                             <text class="type_1">{{monthData.data[i*7 + j].dateShow}}</text>  
  18.                         </view>  
  19.                         <view class="type_2_pad" wx:if="{{monthData.data[i*7 + j].type == 2}}">  
  20.                             <text class="type_2">{{monthData.data[i*7 + j].dateShow}}</text>  
  21.                         </view>  
  22.                     </view>  
  23.                 </view>  
  24.             </view>  
  25.   
  26.   
  27.         </swiper-item>  
  28.     </swiper>  
  29.   
  30.     <text style="width:{{windowWidth}}px;height:2rpx;background-color:#bdbdbd" />  
  31.   
  32.     <view style="display:flex;flex-direction:column;background:#fff;margin-top:53rpx;align-items:center">  
  33.         <image src="{{noclass_icon}}" style="width:105rpx;height:105rpx" />  
  34.         <text style="color:#d9d9d9;font-size:33rpx;margin-top:21rpx">今天没有课程哦~</text>  
  35.     </view>  
  36. </view>  


course.js:

 

[javascript] view plain copy
 
  1. var app = getApp()  
  2.   
  3. var dateUtils = require("../../utils/dateUtils.js")  
  4.   
  5. Page({  
  6.     data : {  
  7.         dateTitles : [  
  8.             "一", "二", "三", "四", "五", "六", "日"  
  9.         ],  
  10.         windowWidth : 0,  
  11.         windowHeight : 0,  
  12.         titleCellWidth : 0,  
  13.         titleCellHeight : 60, // rpx  
  14.         dateCellWidth : 0,  
  15.         dateCellHeight : 120, // rpx  
  16.         monthDatas: [],  
  17.         swiperHeight :0,  
  18.         noclass_icon : "../../img/noclass_icon.png",  
  19.     },  
  20.     onLoad: function(){  
  21.         var that = this  
  22.         wx.getSystemInfo({  
  23.           success: function(res) {  
  24.             that.setData({  
  25.                 windowWidth : res.windowWidth,  
  26.                 windowHeight : res.windowHeight,  
  27.                 titleCellWidth : res.windowWidth/7 -1.1,  
  28.                 dateCellWidth : res.windowWidth/7 -1.1  
  29.             })  
  30.           }  
  31.         })  
  32.   
  33.         var tmp = getInitDate()  
  34.         that.setData({  
  35.             monthDatas : tmp,  
  36.             swiperHeight : tmp[0].dataHarr.length * 122  
  37.         })  
  38.     },  
  39.     swiperChange: function(e){  
  40.         var page = e.detail.current  
  41.         this.setData({  
  42.             swiperHeight : this.data.monthDatas[page].dataHarr.length * 122  
  43.         })  
  44.     }  
  45. })  
  46.   
  47. function getInitDate(){  
  48.     var arr = []  
  49.     var offset = 0 // 测试用  
  50.     arr.push(getDataObj(dateUtils.initThisMonthDates(offset)))  
  51.     arr.push(getDataObj(dateUtils.initNextMonthDates(offset)))  
  52.     return arr  
  53. }  
  54.   
  55. function getDataObj(arr){  
  56.     var obj = {  
  57.         data: arr,  
  58.         dataHarr:dateUtils.initRowList(arr.length/7)  
  59.     }  
  60.     return obj  
  61. }  

 

 

course.json

 

[plain] view plain copy
 
  1. {  
  2.     "navigationBarBackgroundColor": "#000000",  
  3.     "navigationBarTextStyle": "white",  
  4.     "navigationBarTitleText": "课程表",  
  5.     "backgroundColor": "#fff"  
  6. }  


course.wxss

 

 

[css] view plain copy
 
  1. .container-hang {  
  2.     display: flex;  
  3.     flex-direction: row;  
  4.     align-items: center;  
  5.     background-color: white;  
  6. }  
  7.   
  8. .cellDate {  
  9.     background-color: #000;  
  10.     color: white;  
  11.     font-size: 33rpx;  
  12.     margin-right: 1px;  
  13.     text-align: center;  
  14. }  
  15.   
  16. .contentDate {  
  17.     display: flex;  
  18.     flex-direction: column;  
  19.     background-color: #fff;  
  20.     margin: 1rpx  
  21. }  
  22.   
  23. .type_no_1_pad {  
  24.     display: flex;  
  25.     flex-direction: column;  
  26.     padding-top: 17rpx;  
  27.     background-color: #eee;  
  28.     text-align: center;  
  29.     width: 100%;  
  30.     height: 100%;  
  31. }  
  32.   
  33. .type_no_1 { /*type=-1,表示非本月日期*/  
  34.     font-size: 33rpx;  
  35.     color: #c9c9c9;  
  36. }  
  37.   
  38. .type_1_pad {   
  39.     display: flex;  
  40.     flex-direction: column;  
  41.     padding-top: 17rpx;  
  42.     background-color: #ee9b35;  
  43.     align-items: center;  
  44.     width: 100%;  
  45.     height: 100%;  
  46. }  
  47.   
  48. .type_1 { /*type=1, 表示今天日期*/  
  49.     font-size: 33rpx;  
  50.     color: #fff;  
  51. }  
  52.   
  53. .type_2_pad {  
  54.     display: flex;  
  55.     flex-direction: column;  
  56.     padding-top: 17rpx;  
  57.     background-color: #fff;  
  58.     text-align: center;  
  59.     width: 100%;  
  60.     height: 100%;  
  61. }  
  62.   
  63. .type_2 { /*type=2, 表示本月非今天日期*/  
  64.     font-size: 33rpx;  
  65.     color: #000;  
  66. }  
  67.   
  68. .cell-box {  
  69.     display:flex;  
  70.     flex-direction:row;  
  71.     background-color:#bdbdbd;  
  72. }  
  73.   
  74. .swipter-box {  
  75.     display: block;  
  76.     width: 100%;  
  77.     overflow: hidden;  
  78. }  


dateUtils.js

 

 

[javascript] view plain copy
 
  1. // 初始化“课程表”日期  
  2. // 初始化date对应的月份的日期列表  
  3. // -1表示非本月日期  
  4. // 1表示今天  
  5. // 2表示本月非今天的日期  
  6. function initMonthDates(date, isNextMonth=false){  
  7.     var datas = []  
  8.     var month_this = date.getMonth() + 1; // 本月的月份  
  9.     var month_last = month_this == 1? 12: (month_this - 1) // 上个月的月份  
  10.     var month_next = month_this == 12? 1 : (month_this + 1) // 下个月的月份  
  11.   
  12.     var year_this = date.getFullYear()  
  13.     var year_last = month_last == 12? (year_this - 1):year_this  
  14.     var year_next = month_next == 1?(year_this + 1):year_this  
  15.       
  16.     var day_this = date.getDay() //今天是本周的第几天  
  17.     var date_this = date.getDate() // 今天是本月的第几天  
  18.   
  19.     var lastNum = date_this - day_this  
  20.     while(lastNum > 0){  
  21.         lastNum = lastNum - 7  
  22.     }  
  23.   
  24.     var dayNum_last = DayNumOfMonth(year_last, month_last) // 上个月有多少天  
  25.     var dayNum = dayNum_last + lastNum  
  26.     for(var i = 0, c = Math.abs(lastNum); i < c; i++){  
  27.         var tmp = {}  
  28.   
  29.         tmp.year = year_last  
  30.         tmp.month = month_last  
  31.         tmp.day = dayNum  
  32.         tmp.type = -1  
  33.   
  34.         if(dayNum == 1){  
  35.             tmp.dateShow = month_last + "月"  
  36.         }else{  
  37.             tmp.dateShow = dayNum  
  38.         }  
  39.   
  40.         dayNum++  
  41.         datas.push(tmp)  
  42.     }  
  43.   
  44.     var dayNum_this = DayNumOfMonth(year_this, month_this) //这个月有多少天  
  45.     for(var i = 1; i <= dayNum_this; i++){  
  46.         var tmp = {}  
  47.   
  48.         tmp.year = year_this  
  49.         tmp.month = month_this  
  50.         tmp.day = i  
  51.   
  52.         if(isNextMonth){  
  53.             if(i == 1){  
  54.                 tmp.type = 1  
  55.             }else{  
  56.                 tmp.type = 2  
  57.             }  
  58.         }else{  
  59.             if(i == date_this){  
  60.                 tmp.type = 1  
  61.             }else{  
  62.                 tmp.type = 2  
  63.             }  
  64.         }  
  65.           
  66.   
  67.         if(i == 1){  
  68.             tmp.dateShow = month_this + "月"  
  69.         }else{  
  70.             tmp.dateShow = i  
  71.         }  
  72.   
  73.         datas.push(tmp)  
  74.     }  
  75.   
  76.     var dayNum_next = dayNum_this - date_this + day_this  
  77.     while(dayNum_next > 0){  
  78.         dayNum_next -= 7  
  79.     }  
  80.   
  81.     for(var i = 1, c = Math.abs(dayNum_next); i <= c; i++){  
  82.         var tmp = {}  
  83.   
  84.         tmp.year = year_next  
  85.         tmp.month = month_next  
  86.         tmp.day = i  
  87.         tmp.type = -1  
  88.   
  89.         if(i == 1){  
  90.             tmp.dateShow = month_next + "月"  
  91.         }else{  
  92.             tmp.dateShow = i  
  93.         }  
  94.   
  95.         datas.push(tmp)  
  96.     }  
  97.     return datas  
  98. }  
  99.   
  100. function DayNumOfMonth(year,month)  
  101. {  
  102.     return new Date(year,month,0).getDate();  
  103. }  
  104.   
  105. // 初始化下个月的日期列表  
  106. // offset为偏移量，offset默认为0，offset＝1表示获取应该获取到的那个月的下一个月的数据  
  107. function initNextMonthDates(offset = 0){  
  108.     var date = new Date()  
  109.     var nextDate = new Date(date.setMonth(date.getMonth() + 1 + offset))  
  110.     return initMonthDates(nextDate, true)  
  111. }  
  112.   
  113. // 初始化这个月的日期列表  
  114. // offset为偏移量，offset默认为0，offset＝1表示获取应该获取到的那个月的下一个月的数据  
  115. function initThisMonthDates(offset = 0){  
  116.     var date = new Date()  
  117.     var thisDate = new Date(date.setMonth(date.getMonth() + offset))  
  118.     return initMonthDates(thisDate)  
  119. }  
  120.   
  121. function initRowList(num){  
  122.     var arr = []  
  123.     for(var i = 0; i < num; i++){  
  124.         arr.push(i)  
  125.     }  
  126.     return arr  
  127. }  
  128.   
  129. module.exports = {  
  130.     initThisMonthDates : initThisMonthDates,  
  131.     initNextMonthDates : initNextMonthDates,  
  132.     initRowList : initRowList  
  133. }  





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有