日志6月27日-图书馆界面
图书馆打卡记录界面功能需求:
展示图书馆打卡记录,并在日历上显示。
图书馆预约界面功能需求
实现预约
1.项目实现
1.1 图书馆打卡记录界面
先上效果图,比较简洁;
界面分为两部分,上端部分调用极点日历插件功能,可直观显示打卡日期。
下端部分实现一个简单列表显示具体的打卡日期。主要借助到的接口为极点日历插件,利用插件来实现小程序的打卡记录功能。将选定的日期标注为指定的颜色。
同时由于采用的数据时间从2014年开始,将默认时间节点改为2014年一月
但存在一个瑕疵,在于打卡记录只能记录三个月的数据,也就是当前月,前一个月,后一个月。
日历布局wxss关键代码
在日历上显示打卡记录,记录数据为一个color列表,month 取值为current,pre,next三个数据,记录从默认年月份为current月份。剩下的数据为日期,颜色。
在wxml界面里进行日历布局,对color列表中的数据日期进行标记。关键代码如下。
<calendar calendar-style="calendar" year = "2014" month = "01" header-style="calendar-header" board-style="calendar-board" days-color="{
{
color}}" weeks-type="cn" binddayClick="dayClick" />
将数据库里具体的数据导入列表中:
js中关键代码(将学生用户的学习记录导入,包括年月日和具体打卡时间)
onShow: function ()