微信小程序日历打卡

最新推荐文章于 2022-05-10 18:24:24 发布

原创

最新推荐文章于 2022-05-10 18:24:24 发布 · 1.2k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

这篇博客介绍了如何在微信小程序中实现日历打卡功能，包括WXML、JS和CSS的相关代码实现，虽然样式简单，但逻辑清晰。

样式比较简单，要改自己改
在这里插入图片描述

 let currentMonthDays = new Date(year,month,0).getDate() //获取当前月份的天数
 let startWeek = new Date(year + '/' + month + '/' + 1).getDay(); //本月第一天是从星期几开始的

首先要清楚以上两个方法的意思
下面直接上代码，逻辑很简单

wxml

<view class="context">
<view class="top">
  <image src="../../img/left.png" bindtap="bindPreMonth"></image>
  <view>{
   
   {
   
   year}}年{
   
   {
   
   month}}月</view>
  <image src="../../img/right.png" bindtap="bindNextMonth"></image>
</view>

<view  class="middle">
  <view wx:for="{
   
   {data_arr}}" wx:key="index" class="middle_num">
    {
   
   {
   
   item}}
  </view