评论

小程序之日历签到积分

大伙心目中的小程序日历签到,为大家提一个思路解决方案


该示例为纯手写代码,暂无插件,不多说直接上代码
我们的实现思路:
JS部分
1、获取当前年月
const date = new Date();
cur_year = date.getFullYear();
cur_month = date.getMonth() + 1;
const weeks_ch = [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’];
this.setData({
cur_year,
cur_month,
weeks_ch,
})

2、获取当月共多少天
getThisMonthDays: function (year, month) {
return new Date(year, month, 0).getDate()
},

3、获取当月第一天星期几
getFirstDayOfWeek: function (year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
},

4、计算当月1号前空了几个格子,把它填充在days数组的前面
calculateEmptyGrids: function (year, month) {
var that = this;
//计算每个月时要清零
that.setData({ days: [] });
const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
if (firstDayOfWeek > 0) {
for (let i = 0; i < firstDayOfWeek; i++) {
var obj = {
date: null,
isSign: false
}
that.data.days.push(obj);
}
this.setData({
days: that.data.days
});
//清空
} else {
this.setData({
days: []
});
}
},

5、绘制当月天数占的格子,并把它放到days数组中
calculateDays: function (year, month, sign) {
var that = this;
var isSign;
const thisMonthDays = this.getThisMonthDays(year, month);
for (var i = 1; i <= thisMonthDays; i++) {
var obj = {
date: i,
isSign: ‘’
}
for (var j = 0; j < sign.length; j++) {
if (i == parseInt(sign[j].create_time.substr(8, 2))) {
obj.isSign = true;
break;
}
}
that.data.days.push(obj);
}
this.setData({
days: that.data.days
});
},

6、切换控制年月,上一个月,下一个月
handleCalendar: function (e) {
const handle = e.currentTarget.dataset.handle;
const cur_year = this.data.cur_year;
const cur_month = this.data.cur_month;
if (handle === ‘prev’) {
let newMonth = cur_month - 1;
let newYear = cur_year;
if (newMonth < 1) {
newYear = cur_year - 1;
newMonth = 12;
}
this.signRecord(newYear, newMonth);
this.setData({
cur_year: newYear,
cur_month: newMonth,
imgType: ‘cnext.png’
})
} else {
if (cur_month + 1 > month) {
this.setData({
imgType: ‘next.png’
})
} else {
let newMonth = cur_month + 1;
let newYear = cur_year;
if (newMonth > 12) {
newYear = cur_year + 1;
newMonth = 1;
}
this.signRecord(newYear, newMonth);
if (cur_month + 1 == month) {
this.setData({
cur_year: newYear,
cur_month: newMonth,
imgType: ‘next.png’
})
} else {
this.setData({
cur_year: newYear,
cur_month: newMonth,
imgType: ‘cnext.png’
})
}
}
}
},

wxml部分:
<view class=‘all’>
<view class=“bar”>
<!-- 上一个月 -->
<view class=“previous” bindtap=“handleCalendar” data-handle=“prev”>
<image src=‘https://www.***.com/weChatImg/pre.png’></image>
</view>
<!-- 显示年月 -->
<view class=“date”>{{cur_year || “–”}} / {{filter.fill(cur_month) || “–”}}</view>
<!-- 下一个月 -->
<view class=“next” bindtap=“handleCalendar” data-handle=“next”>
<image src=‘https://www.***.com/weChatImg/{{imgType}}’></image>
</view>
</view>
<view class=‘xxian’>
<image src=‘weChatImg/huan.png’></image>
<image src=‘weChatImg/huan.png’></image>
</view>
<!-- 显示星期 -->
<view class=“week”>
<view wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
</view>
<view class=‘days’>
<!-- 列 -->
<view class=“columns” wx:for="{{days.length/7}}" wx:for-index=“i” wx:key=“i”>
<view wx:for="{{days}}" wx:for-index=“j” wx:key=“j”>
<!-- 行 -->
<view class=“rows” wx:if="{{j/7 == i}}">
<view class=“rows” wx:for="{{7}}" wx:for-index=“k” wx:key=“k”>
<!-- 每个月份的空的单元格 -->
<view class=‘cell’ wx:if="{{days[j+k].date == null}}">
<text decode="{{true}}">  </text>
</view>
<!-- 每个月份的有数字的单元格 -->
<view class=‘cell’ wx:else>
<!-- 当前日期已签到 -->
<view wx:if="{{days[j+k].isSign == true}}" style=‘color:#acacac’ class=‘cell’>
{{days[j+k].date}}
<image src=‘https://www.***.com/weChatImg/sgin.png’></image>
</view>
<!-- 当前日期未签到 -->
<view wx:else>
<text>{{days[j+k].date}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>

相信大家通过以上思路,再结合自己的需求应该可以自己做出符合自己心目中的日历插件或者签到

最后一次编辑于  2019-09-11  
点赞 4
收藏
评论

5 个评论

  • c
    c
    2019-10-31

    写的挺好,能把代码或者样式贴出来吗

    2019-10-31
    赞同 1
    回复
  • 留香
    留香
    2022-11-11

    组件view的data-handle属性有什么作用

    2022-11-11
    赞同
    回复 1
    • J.s
      J.s
      2022-11-15
      自定义的变量,在点击事件中获取相关的值
      2022-11-15
      回复
  • 2019-09-12

    signRecord这个方法您好像没有贴,这个方法是干嘛的呢


    2019-09-12
    赞同
    回复 1
    • J.s
      J.s
      2019-09-17
      签到记录 ,这个各人需求不一样 就不贴了
      2019-09-17
      回复
  • Hey Jia
    Hey Jia
    2019-09-12

    好巧 前几天我就是用这个思路写出来的

    2019-09-12
    赞同
    回复
  • 大鲨鱼
    大鲨鱼
    2019-09-11

    可以哦!你是怎么实现的呢?用的插件吗?把你的代码分享一下舍!我们也好学习一下呢

    2019-09-11
    赞同
    回复 4
    • J.s
      J.s
      2019-09-11
      不是插件,具体步奏代码我已经贴上,实现出来得靠你自己了
      2019-09-11
      回复
    • 大鲨鱼
      大鲨鱼
      2019-09-11回复J.s
      你具体的还没实现嘛
      2019-09-11
      回复
    • J.s
      J.s
      2019-09-11回复大鲨鱼
      肯定实现了啊
      2019-09-11
      回复
    • 大鲨鱼
      大鲨鱼
      2019-09-11回复J.s

      代码分享,就不去具体实现了,好费时间哦

      2019-09-11
      回复
登录 后发表内容