找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序日历demo

[复制链接]
查看: 2689|回复: 37
最佳答案
0 

5

主题

5

帖子

91

积分

新人求带

积分
91
 楼主| 发表于 2017-2-8 16:23:37 | 显示全部楼层 |阅读模式
诞生背景

小程序很火,但是现有的很多web插件都是操作DOM的,导致不能直接使用,最近需要弄个小程序日历,故而分享出来,大家相互交流。

思路分析

要实现一个日历,就需要先知道几个值:
  • 当月有多少天
  • 当月第一天星期几

根据常识我们得知,每月最多31天,最少28天,日历一排7个格子,则会有5排,但若是该月第一天为星期六,则会产生六排格子才对。

小程序不能操作DOM,故不能动态的往当月第一天的插入多少个空格子,只能通过在前面加入空格子的循环来控制,具体参考 wxml 文件。

代码展示

由上面的分析就知道该怎么操作了,下面提出代码:

js文件
  1. const conf = {
  2.   data: {
  3.     // hasEmptyGrid 变量控制是否渲染空格子,若当月第一天是星期天,就不应该渲染空格子
  4.     hasEmptyGrid: false
  5.   },
  6.   // 控制scroll-view高度
  7.   getSystemInfo() {
  8.     try {
  9.       const res = wx.getSystemInfoSync();
  10.       this.setData({
  11.         scrollViewHeight: res.windowHeight * res.pixelRatio || 667
  12.       });
  13.     } catch (e) {
  14.       console.log(e);
  15.     }
  16.   },
  17.   // 获取当月共多少天
  18.   getThisMonthDays(year, month) {
  19.     return new Date(year, month, 0).getDate();
  20.   },
  21.   // 获取当月第一天星期几
  22.   getFirstDayOfWeek(year, month) {
  23.     return new Date(Date.UTC(year, month - 1, 1)).getDay();
  24.   },
  25.   // 计算当月1号前空了几个格子
  26.   calculateEmptyGrids(year, month) {
  27.     const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
  28.     let empytGrids = [];
  29.     if (firstDayOfWeek > 0) {
  30.       for (let i = 0; i < firstDayOfWeek; i++) {
  31.         empytGrids.push(i);
  32.       }
  33.       this.setData({
  34.         hasEmptyGrid: true,
  35.         empytGrids
  36.       });
  37.     } else {
  38.       this.setData({
  39.         hasEmptyGrid: false,
  40.         empytGrids: []
  41.       });
  42.     }
  43.   },
  44.   // 绘制当月天数占的格子
  45.   calculateDays(year, month) {
  46.     let days = [];
  47.     const thisMonthDays = this.getThisMonthDays(year, month);
  48.     for (let i = 1; i <= thisMonthDays; i++) {
  49.       days.push(i);
  50.     }
  51.     this.setData({
  52.       days
  53.     });
  54.   },
  55.   // 初始化数据
  56.   onLoad(options) {
  57.     const date = new Date();
  58.     const cur_year = date.getFullYear();
  59.     const cur_month = date.getMonth() + 1;
  60.     const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
  61.     this.calculateEmptyGrids(cur_year, cur_month);
  62.     this.calculateDays(cur_year, cur_month);
  63.     this.getSystemInfo();
  64.     this.setData({
  65.       cur_year,
  66.       cur_month,
  67.       weeks_ch
  68.     })
  69.   },
  70.   // 切换控制年月
  71.   handleCalendar(e) {
  72.     const handle = e.currentTarget.dataset.handle;
  73.     const cur_year = this.data.cur_year;
  74.     const cur_month = this.data.cur_month;
  75.     if (handle === 'prev') {
  76.       let newMonth = cur_month - 1;
  77.       let newYear = cur_year;
  78.       if (newMonth < 1) {
  79.         newYear = cur_year - 1;
  80.         newMonth = 12;
  81.       }

  82.       this.calculateDays(newYear, newMonth);
  83.       this.calculateEmptyGrids(newYear, newMonth);

  84.       this.setData({
  85.         cur_year: newYear,
  86.         cur_month: newMonth
  87.       })

  88.     } else {
  89.       let newMonth = cur_month + 1;
  90.       let newYear = cur_year;
  91.       if (newMonth > 12) {
  92.         newYear = cur_year + 1;
  93.         newMonth = 1;
  94.       }

  95.       this.calculateDays(newYear, newMonth);
  96.       this.calculateEmptyGrids(newYear, newMonth);

  97.       this.setData({
  98.         cur_year: newYear,
  99.         cur_month: newMonth
  100.       })
  101.     }
  102.   },
  103.   onShareAppMessage() {
  104.     return {
  105.       title: '小程序日历',
  106.       desc: '还是新鲜的日历哟',
  107.       path: 'pages/index/index'
  108.     }
  109.   }
  110. };
  111. Page(conf);
复制代码

wxml文件
  1. <scroll-view scroll-y="true" class="flex box box-tb box-pack-center box-align-center" style="height: {{scrollViewHeight*2}}rpx">
  2.   <view class="calendar pink-color box box-tb">
  3.         <view class="top-handle fs28 box box-lr box-align-center box-pack-center">
  4.             <view class="prev box box-rl" bindtap="handleCalendar" data-handle="prev">
  5.                 <view class="prev-handle box box-lr box-align-center box-pack-center">《</view>
  6.             </view>
  7.             <view class="date-area box box-lr box-align-center box-pack-center">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
  8.             <view class="next box box-lr" bindtap="handleCalendar" data-handle="next">
  9.                 <view class="next-handle box box-lr box-align-center box-pack-center">》</view>
  10.             </view>
  11.         </view>
  12.         <view class="weeks box box-lr box-pack-center box-align-center">
  13.             <view class="flex week fs28" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
  14.         </view>
  15.         <view class="days box box-lr box-wrap">
  16.             <view wx:if="{{hasEmptyGrid}}" class="grid white-color box box-align-center box-pack-center" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}">
  17.             </view>
  18.             <view class="grid white-color box box-align-center box-pack-center" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}">
  19.                 <view class="day {{index >= 5 && index <= 13 ? 'border-radius pink-bg' : ''}} box box-align-center box-pack-center">{{item}}</view>
  20.             </view>
  21.         </view>
  22.     </view>
  23. </scroll-view>
复制代码

wxss文件

// 为节省篇幅,略过...
46e2e6a7067.jpg

游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

2

帖子

186

积分

新人求带

积分
186
发表于 2017-2-15 11:29:19 | 显示全部楼层
好东西 css参考一下
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

6

帖子

52

积分

新人求带

积分
52
发表于 2017-2-18 12:57:10 | 显示全部楼层
asdsaasdasdas
回复 支持 反对

使用道具 举报

最佳答案
0 

2

主题

15

帖子

464

积分

略知一二

积分
464
发表于 2017-2-18 14:14:06 | 显示全部楼层
只是想看看学习资源......
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

2

帖子

36

积分

新人求带

积分
36
发表于 2017-2-21 14:51:08 | 显示全部楼层
太神奇了 感觉自己啥都不懂
回复 支持 反对

使用道具 举报

最佳答案
8 

9

主题

144

帖子

4300

积分

版主

Rank: 7Rank: 7Rank: 7

积分
4300

领域专家

发表于 2017-2-22 10:07:43 | 显示全部楼层
11111111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

2

帖子

48

积分

新人求带

积分
48
发表于 2017-2-23 15:09:57 | 显示全部楼层
还不错嘛
回复

使用道具 举报

最佳答案
0 

0

主题

9

帖子

195

积分

新人求带

积分
195
发表于 2017-2-28 09:55:19 | 显示全部楼层
范德萨发的所发生的发送到
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

6

帖子

167

积分

新人求带

积分
167
发表于 2017-3-9 10:57:46 | 显示全部楼层
111111111111111111111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

3

帖子

125

积分

新人求带

积分
125
发表于 2017-4-1 17:55:48 | 显示全部楼层
非常好看的日历..支持下
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com