午夜91福利视频,午夜成人在线观看,午夜在线视频免费观看,午夜福利短视频,精品午夜成人免费视频APP

小程序模板網

微信小程序開發－模仿“優優老師”課程日歷

發布時間：2017-11-28 17:28 所屬欄目：小程序開發教程

模仿“優優老師APP”的課程日(ri)(ri)歷(li)實現的Demo，只顯(xian)示(shi)(shi)當月 和下個月兩個月的日(ri)(ri)期，會根據不(bu)同類型的日(ri)(ri)期類型顯(xian)示(shi)(shi)不(bu)一(yi)樣(yang)的樣(yang)式，在(zai)wx-swiper組件中動態添加了datePad，會根據要顯(xian)示(shi)(shi)月份(fen)的日(ri)(ri) ...

 
 
 

模仿“優優老師APP”的課程日歷實現的Demo，只顯示<當月> 和<下個月>兩個月的日期，會根據不同類型的日期類型顯示不一樣的樣式，在wx-swiper組件中動態添加了datePad，會根據要顯示月份的日期動態確定日期表格是4，5，還是6行，并動態改變swiper的高度,本月的第一天默認選中狀態，下個月的第一天默認是選中狀態。 
 

［效果(guo)展示］

［目(mu)錄結構］

img：本地icon文件文件夾

course：課程日歷代碼的目錄

utils：工具類文件夾

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

［貼(tie)代碼］

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&nbsp;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 ==&nbsp;-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 +&nbsp;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 +&nbsp;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&quot;>今天沒有(you)課程哦~</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 :&nbsp;{  
  7.   &nbsp;     dateTitles : [  
  8.             "一", "二", "三", "四", "五(wu)", "六", "日"  
  9.   &nbsp;     ],  
  10.     ;    windowWidth : 0,  
  11.     &nbsp;   windowHeight : 0,  
  12.         titleCellWidth : ;0,  
  13.         titleCellHeight : 60, // rpx  
  14.         dateCellWidth : 0,  
  15.         dateCellHeight : 120, // rpx  
  16.         monthDatas: [], &nbsp;
  17.         swiperHeight :0,  ;
  18.         noclass_icon : "../../img/noclass_icon.png",  
  19.     },  
  20.     onLoad: function(){  
  21.         var that = this  
  22.        &nbsp;wx.getSystemInfo({  
  23.           success: function(res) {  
  24.             that.setData({  
  25.       ;          windowWidth : res.windowWidth,  
  26.       &nbsp;         windowHeight&nbsp;: res.windowHeight,  
  27.    &nbsp;          ;  titleCellWidth : res.windowWidth/7 -1.1,  
  28.         &nbsp;       dateCellWidth : res.windowWidth/7 -1.1  
  29.    ;         })  
  30.           }&nbsp; 
  31.       &nbsp; })  
  32.   
  33.         var tmp = getInitDate()  
  34.   &nbsp;     that.setData({  
  35.             monthDatas :&nbsp;tmp,&nbsp; 
  36.      &nbsp;      swiperHeight : tmp[0].dataHarr.length * 122  
  37.   ;   &nbsp;  })  
  38.     },  
  39.     swiperChange: function(e){  
  40.         var page&nbsp;= 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&quot;: "#000000",  
  3.     "navigationBarTextStyle": "white", ; 
  4.     "navigationBarTitleText&quot;: "課程表(biao)",  
  5.     &quot;backgroundColor": "#fff&quot;  
  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,表示非本月(yue)日期*/  
  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, 表示本(ben)月(yue)非(fei)今(jin)天日期*/  
  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. // 初始化“課(ke)程表”日期  
  2. // 初始(shi)化date對應的月(yue)份的日期(qi)列表  
  3. // -1表示(shi)非本月日期  
  4. // 1表示今天  
  5. // 2表示本月非今天的日期  
  6. function initMonthDates(date, isNextMonth=false){  
  7.     var datas = []  
  8.     var month_this = date.getMonth() + 1; // 本月(yue)(yue)的月(yue)(yue)份(fen)  
  9.     var month_last = month_this == 1? 12: (month_this - 1) // 上(shang)個(ge)月的月份(fen)  
  10.     var month_next =&nbsp;month_this ;== 12? 1 : (month_this + 1) // 下個(ge)月的(de)月份  
  11.   
  12.     var year_this =&nbsp;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() //今天是本(ben)周(zhou)的第幾天  
  17.     var date_this = date.getDate() // 今天(tian)(tian)是本(ben)月的第幾天(tian)(tian)  
  18.   
  19.     var lastNum = date_this - day_this  
  20.     while(lastNum > 0){  
  21.         lastNum = lastNum -&nbsp;7  
  22.     }  
  23.   
  24.     var dayNum_last =&nbsp;DayNumOfMonth(year_last, month_last) // 上(shang)個月有多少(shao)天  
  25.     var dayNum = dayNum_last ;+ lastNum  
  26.     for(var i = 0, c = Math.abs(lastNum); i < c; i++){ &nbsp;
  27.         var tmp = {}  
  28.   
  29.        &nbsp;tmp.year = year_last&nbsp; 
  30.      ;   tmp.month = month_last  
  31.    &nbsp;    tmp.day =&nbsp;dayNum  
  32.  &nbsp;   &nbsp;  tmp.type = -1  
  33.   
  34.         if(dayNum == 1){  
  35.             tmp.dateShow = month_last + "月"  
  36.         }else{  
  37.  &nbsp;          tmp.dateShow = dayNum  
  38.         }  
  39.   
  40.     &nbsp;  &nbsp;dayNum++  
  41.     ;  &nbsp; datas.push(tmp)  
  42.     }  
  43.   
  44.     var dayNum_this = DayNumOfMonth(year_this, month_this) //這個月(yue)有(you)多少(shao)天  
  45.     for(var i = 1; i <=&nbsp;dayNum_this; i++){  ;
  46.         var tmp = {}  
  47.   
  48.         tmp.year = year_this  
  49.         tmp.month =&nbsp;month_this &nbsp;
  50.  &nbsp;      tmp.day = i  
  51.   
  52.         if(isNextMonth){  
  53.             if(i == 1){  
  54.   &nbsp;             tmp.type = 1  
  55.             }else{  
  56. &nbsp;               tmp.type = 2  
  57.     &nbsp;       }  
  58.         }else{  
  59.             if(i == date_this){  
  60.             &nbsp;   tmp.type = 1  
  61.             }else{  
  62.                 tmp.type = 2  
  63.         &nbsp;   }  
  64.  &nbsp;      }  
  65. &nbsp;         
  66.   
  67.         if(i == 1){  
  68.             tmp.dateShow = month_this + "月"  
  69.         }else{  
  70.     &nbsp;       tmp.dateShow = i  
  71.         }&nbsp; 
  72.   
  73.         datas.push(tmp)  
  74.     }  
  75.   
  76.     var dayNum_next = dayNum_this - date_this + day_this&nbsp; 
  77.     while(dayNum_next > 0){  
  78.   &nbsp;     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.       &nbsp; tmp.month = month_next  
  86.       &nbsp; tmp.day = i &nbsp;
  87.         tmp.type&nbsp;= -1  
  88.   
  89.         if(i == 1){  
  90.             tmp.dateShow = month_next + "月"  
  91.         }else{  
  92.             tmp.dateShow = ;i  
  93.  &nbsp;      }  
  94.   
  95.     &nbsp;   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. // 初始(shi)化下個月的日期列表  
  106. // offset為(wei)(wei)偏移量，offset默認(ren)為(wei)(wei)0，offset＝1表示獲取(qu)應該獲取(qu)到的那個月的下一個月的數據(ju)  
  107. function initNextMonthDates(offset = 0){&nbsp; 
  108.     var date = new Date()  
  109.     var nextDate = new Date(date.setMonth(date.getMonth() + 1&nbsp;+ offset))  
  110.     return initMonthDates(nextDate, true)  
  111. }  
  112.   
  113. // 初始化這個月的日期(qi)列表  
  114. // offset為偏移(yi)量，offset默認為0，offset＝1表示獲取應該獲取到的那個月的下一個月的數據  
  115. function initThisMonthDates(offset = 0){ &nbsp;
  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++){ &nbsp;
  124. &nbsp;       arr.push(i)  
  125.     }  
  126.     return arr  
  127. }  
  128.   
  129. module.exports = {  
  130.     initThisMonthDates : initThisMonthDates,  
  131.     initNextMonthDates ;: initNextMonthDates,  
  132.   &nbsp; initRowList : initRowList  
  133. }  


易優小程序（企業版）+靈活api+前后代碼開源(yuan) 碼(ma)云倉庫:
本文地址：//www.jinyoudianli.com/wxmini/doc/course/17978.html 復制鏈接 如需定制請(qing)聯(lian)系(xi)易優(you)客服咨(zi)詢(xun)：

工作日 8:30-12:00 14:30-18:00
周(zhou)六及部(bu)分(fen)節假日提供值班服務

易(yi)小優
轉人工 ×