用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序下订单件插(日历)

Rolan 2018-4-8 00:23

最近做小程序开发,出于练手,也是工作需要,就做了个微信小程序的类似于酒店预订的日历插件。先上图;这个插件分为上下两部分,上边是tab栏,会根据当前的日期自动定位到当前,并展示以后7天的日期,下边为内容展示 ...

最近做小程序开发,出于练手,也是工作需要,就做了个微信小程序的类似于酒店预订的日历插件。 
先上图;

这个插件分为上下两部分,上边是tab栏,会根据当前的日期自动定位到当前,并展示以后7天的日期,下边为内容展示,随tab栏变化而变化。 
思路: 
首先用new Data()时间对象初始化时间,获取当前的日期,用new Date(Date.UTC(year, month - 1, 1)).getDay()获取每个月的第一天是星期几。

  1. // 计算每月第一天是星期几
  2. function getFirstDayOfWeek(year, month) {
  3. return new Date(Date.UTC(year, month - 1, 1)).getDay();
  4. }
  5. const date = new Date();
  6. const cur_year = date.getFullYear();
  7. const cur_month = date.getMonth() + 1;
  8. const cur_date=date.getDate();
  9. const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];

利用构造函数生成数据,一会用。

  1. //利用构造函数创建对象
  2. function calendar(date,week){
  3. this.date=cur_year+'-'+cur_month+'-'+date;
  4. if(date==cur_date){
  5. this.week = "今天";
  6. }else if(date==cur_date+1){
  7. this.week = "明天";
  8. }else{
  9. this.week = '星期' + week;
  10. }
  11. }

使用for循环生成json数据:

  1. for(var i=1;i<=monthLength;i++){
  2. //当循环完一周后,初始化再次循环
  3. if(x>6){
  4. x=0;
  5. }
  6. //利用构造函数创建对象
  7. that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
  8. x++;
  9. }

这里因为一周有7天,所以当x>6的时候,重置为0。 
最后展示部分源码

  1. var that=this;
  2. function getThisMonthDays(year, month) {
  3. return new Date(year, month, 0).getDate();
  4. }
  5. // 计算每月第一天是星期几
  6. function getFirstDayOfWeek(year, month) {
  7. return new Date(Date.UTC(year, month - 1, 1)).getDay();
  8. }
  9. const date = new Date();
  10. const cur_year = date.getFullYear();
  11. const cur_month = date.getMonth() + 1;
  12. const cur_date=date.getDate();
  13. const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
  14. //利用构造函数创建对象
  15. function calendar(date,week){
  16. this.date=cur_year+'-'+cur_month+'-'+date;
  17. if(date==cur_date){
  18. this.week = "今天";
  19. }else if(date==cur_date+1){
  20. this.week = "明天";
  21. }else{
  22. this.week = '星期' + week;
  23. }
  24. }
  25. //当前月份的天数
  26. var monthLength= getThisMonthDays(cur_year, cur_month)
  27. //当前月份的第一天是星期几
  28. var week = getFirstDayOfWeek(cur_year, cur_month)
  29. var x = week;
  30. for(var i=1;i<=monthLength;i++){
  31. //当循环完一周后,初始化再次循环
  32. if(x>6){
  33. x=0;
  34. }
  35. //利用构造函数创建对象
  36. that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
  37. x++;
  38. }
  39. //限制要渲染的日历数据天数为7天以内(用户体验)
  40. var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length:7)
  41. that.setData({
  42. calendar: flag
  43. })
  44. //设置scroll-view的子容器的宽度
  45. that.setData({
  46. width: 186 * parseInt(that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7)
  47. })

最后奉上github地址:

github地址

鲜花
鲜花 (2)
鸡蛋
鸡蛋

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: 李佳明同学 来自: cnblogs

相关阅读