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

关注公众号“码农帮派”，查看更多系列技术文章：

模仿“优优老师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:

var app = getApp()var dateUtils = require("../../utils/dateUtils.js")Page({data : {dateTitles : ["一", "二", "三", "四", "五", "六", "日"],windowWidth : 0,windowHeight : 0,titleCellWidth : 0,titleCellHeight : 60, // rpxdateCellWidth : 0,dateCellHeight : 120, // rpxmonthDatas: [],swiperHeight :0,noclass_icon : "../../img/noclass_icon.png",},onLoad: function(){var that = thiswx.getSystemInfo({success: function(res) {that.setData({windowWidth : res.windowWidth,windowHeight : res.windowHeight,titleCellWidth : res.windowWidth/7 -1.1,dateCellWidth : res.windowWidth/7 -1.1})}})var tmp = getInitDate()that.setData({monthDatas : tmp,swiperHeight : tmp[0].dataHarr.length * 122})},swiperChange: function(e){var page = e.detail.currentthis.setData({swiperHeight : this.data.monthDatas[page].dataHarr.length * 122})}
})function getInitDate(){var arr = []var offset = 0 // 测试用arr.push(getDataObj(dateUtils.initThisMonthDates(offset)))arr.push(getDataObj(dateUtils.initNextMonthDates(offset)))return arr
}function getDataObj(arr){var obj = {data: arr,dataHarr:dateUtils.initRowList(arr.length/7)}return obj
}

course.json

{"navigationBarBackgroundColor": "#000000","navigationBarTextStyle": "white","navigationBarTitleText": "课程表","backgroundColor": "#fff"
}

course.wxss

.container-hang {display: flex;flex-direction: row;align-items: center;background-color: white;
}.cellDate {background-color: #000;color: white;font-size: 33rpx;margin-right: 1px;text-align: center;
}.contentDate {display: flex;flex-direction: column;background-color: #fff;margin: 1rpx
}.type_no_1_pad {display: flex;flex-direction: column;padding-top: 17rpx;background-color: #eee;text-align: center;width: 100%;height: 100%;
}.type_no_1 { /*type=-1,表示非本月日期*/font-size: 33rpx;color: #c9c9c9;
}.type_1_pad { display: flex;flex-direction: column;padding-top: 17rpx;background-color: #ee9b35;align-items: center;width: 100%;height: 100%;
}.type_1 { /*type=1, 表示今天日期*/font-size: 33rpx;color: #fff;
}.type_2_pad {display: flex;flex-direction: column;padding-top: 17rpx;background-color: #fff;text-align: center;width: 100%;height: 100%;
}.type_2 { /*type=2, 表示本月非今天日期*/font-size: 33rpx;color: #000;
}.cell-box {display:flex;flex-direction:row;background-color:#bdbdbd;
}.swipter-box {display: block;width: 100%;overflow: hidden;
}

dateUtils.js

// 初始化“课程表”日期
// 初始化date对应的月份的日期列表
// -1表示非本月日期
// 1表示今天
// 2表示本月非今天的日期
function initMonthDates(date, isNextMonth=false){var datas = []var month_this = date.getMonth() + 1; // 本月的月份var month_last = month_this == 1? 12: (month_this - 1) // 上个月的月份var month_next = month_this == 12? 1 : (month_this + 1) // 下个月的月份var year_this = date.getFullYear()var year_last = month_last == 12? (year_this - 1):year_thisvar year_next = month_next == 1?(year_this + 1):year_thisvar day_this = date.getDay() //今天是本周的第几天var date_this = date.getDate() // 今天是本月的第几天var lastNum = date_this - day_thiswhile(lastNum > 0){lastNum = lastNum - 7}var dayNum_last = DayNumOfMonth(year_last, month_last) // 上个月有多少天var dayNum = dayNum_last + lastNumfor(var i = 0, c = Math.abs(lastNum); i < c; i++){var tmp = {}tmp.year = year_lasttmp.month = month_lasttmp.day = dayNumtmp.type = -1if(dayNum == 1){tmp.dateShow = month_last + "月"}else{tmp.dateShow = dayNum}dayNum++datas.push(tmp)}var dayNum_this = DayNumOfMonth(year_this, month_this) //这个月有多少天for(var i = 1; i <= dayNum_this; i++){var tmp = {}tmp.year = year_thistmp.month = month_thistmp.day = iif(isNextMonth){if(i == 1){tmp.type = 1}else{tmp.type = 2}}else{if(i == date_this){tmp.type = 1}else{tmp.type = 2}}if(i == 1){tmp.dateShow = month_this + "月"}else{tmp.dateShow = i}datas.push(tmp)}var dayNum_next = dayNum_this - date_this + day_thiswhile(dayNum_next > 0){dayNum_next -= 7}for(var i = 1, c = Math.abs(dayNum_next); i <= c; i++){var tmp = {}tmp.year = year_nexttmp.month = month_nexttmp.day = itmp.type = -1if(i == 1){tmp.dateShow = month_next + "月"}else{tmp.dateShow = i}datas.push(tmp)}return datas
}function DayNumOfMonth(year,month)
{return new Date(year,month,0).getDate();
}// 初始化下个月的日期列表
// offset为偏移量，offset默认为0，offset＝1表示获取应该获取到的那个月的下一个月的数据
function initNextMonthDates(offset = 0){var date = new Date()var nextDate = new Date(date.setMonth(date.getMonth() + 1 + offset))return initMonthDates(nextDate, true)
}// 初始化这个月的日期列表
// offset为偏移量，offset默认为0，offset＝1表示获取应该获取到的那个月的下一个月的数据
function initThisMonthDates(offset = 0){var date = new Date()var thisDate = new Date(date.setMonth(date.getMonth() + offset))return initMonthDates(thisDate)
}function initRowList(num){var arr = []for(var i = 0; i < num; i++){arr.push(i)}return arr
}module.exports = {initThisMonthDates : initThisMonthDates,initNextMonthDates : initNextMonthDates,initRowList : initRowList
}

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

视频教程-老司机讲前端之微信小程序开发成语消消乐游戏视频课程-微信开发
老司机讲前端之微信小程序开发成语消消乐游戏视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3 ...
视频教程-30小时微信小程序从入门到精通课程-基础篇-微信开发
30小时微信小程序从入门到精通课程-基础篇 8年IT开发经验,6年IT教育经验,喜欢把复杂逻辑用简单的表述传达给学生,传授编程知识,讲述生活故事曹圣捷 ¥12.00 立即订阅扫码下载「CSDN程序 ...
JEECG社区微信小程序开发实战-张代浩-专题视频课程
JEECG社区微信小程序开发实战-511人已学习课程介绍微信小程序开发培训,包含环境搭建.实例讲解.对接支付功能等课题. 课程收益微信小程序开发培训,包含环境搭建.实例讲 ...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-陶国荣-专题视频课程...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-102人已学习课程介绍本课通过一个完整.真实的游戏项目,带着学员手动开发代码,本课分项目介绍.界面效果.技术分析.代码实现.打包 ...
微信小程序开发实战课程之油耗计算器-耿广龙-专题视频课程
微信小程序开发实战课程之油耗计算器-3406人已学习课程介绍微信小程序开发实战课程之油耗计算器,通过练习开发工具类的油耗计算器小程序,可以帮助大家了解微信小程序的API,相关组件的 ...
微信小程序开发全案精讲-刘刚-专题视频课程
微信小程序开发全案精讲-4467人已学习课程介绍微信小程序开发全案精讲是一套以案例为主线的课程,课程总共九章,第一章回顾基础知识,后面八章全部是以典型的案例作为讲解,选取了美食类: ...
微信小程序开发区块链钱包-CSDN公开课-专题视频课程
微信小程序开发区块链钱包-398人已学习课程介绍应用微信小程序开发基于区块链的钱包界面,包含余额显示.转账.充值等功能. 课程收益 1.小程序组件介绍 2.相关API介绍 ...
视频教程-微信小程序开发实战之番茄时钟开发-微信开发
微信小程序开发实战之番茄时钟开发 4年web前后端开发经验,熟悉PHP,Python后端技术,熟悉基于Lnmp环境的项目开发和部署,擅长Yii,ThinkPHP,CI,Django,Flask等国内外 ...
视频教程-微信小程序开发【初级篇 / 附案例】-微信开发
微信小程序开发[初级篇 / 附案例] 北风网讲师!瓢城Web俱乐部创始人,教学总监! 李炎恢 ¥129.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程, ...

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

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

最新文章

热门文章