前言

最近公司有需求需要实现一个5*7布局日历，做一个日常签到功能，该篇文章主要主要介绍如何实现该日历布局需求并通过点击按钮切换上一月下一月来改变日历的交互，有遇到类似需求的jy们可以直接搬运，转载请注明出处，谢谢。 废话不多说，直接上代码

代码实现

WXML部分

这里运用了双层嵌套循环，具体需求实现也可以更改为Flex布局或其他，这样就只需要一层遍历即可，我在具体实现上也是只有一层的

<view class="container">
  <!-- 年份月份切换 -->
  <view class="header">
    <button bindtap="prevMonth">上一月</button>
    <text>{{ year }}年{{ month }}月</text>
    <button bindtap="nextMonth">下一月</button>
  </view>

  <!-- 星期标签 -->
  <view class="week-labels">
    <view class="label">星期日</view>
    <view class="label">星期一</view>
    <view class="label">星期二</view>
    <view class="label">星期三</view>
    <view class="label">星期四</view>
    <view class="label">星期五</view>
    <view class="label">星期六</view>
  </view>

  <!-- 日历布局 -->
  <view class="calendar">
    <block wx:for="{{ calendar }}" wx:key="index">
      <view class="week">
        <block wx:for="{{ item }}" wx:key="index">
          <view class="day">{{ item }}</view>
        </block>
      </view>
    </block>
  </view>
</view>

WXSS部分

这里只给了简单的布局 可以根据具体需求修改和调整

/* pages/index/index.wxss */

.container {
  margin: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.week-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.label {
  flex: 1;
  text-align: center;
  font-weight: bold;
}

.calendar {
  border-collapse: collapse;
  width: 100%;
}

.week {
  display: flex;
  justify-content: space-between;
}

.day {
  flex: 1;
  text-align: center;
  padding: 10px;
}

.day:not(:empty) {
  background-color: #f0f0f0;
}

.day:hover {
  background-color: #ddd;
}

JS部分

// pages/index/index.js
Page({
  data: {
    year: new Date().getFullYear(), // 当前年份
    month: new Date().getMonth() + 1, // 当前月份
    calendar: [], // 日历布局
  },

  // 页面加载时执行
  onLoad: function () {
    this.generateCalendar();
  },

  // 生成日历布局 可以改为一层
  generateCalendar: function () {
    const year = this.data.year;
    const month = this.data.month;
    const daysInMonth = new Date(year, month, 0).getDate();
    const firstDayOfWeek = new Date(year, month - 1, 1).getDay();
    const lastDayOfLastMonth = new Date(year, month - 1, 0).getDate();
    const weeks = 5; // 固定为5周
    const calendar = [];
    let dayCounter = 1 - firstDayOfWeek;
    for (let i = 0; i < weeks; i++) {
      const week = [];
      for (let j = 0; j < 7; j++) {
        if (dayCounter <= 0) {
          week.push(lastDayOfLastMonth + dayCounter);
        } else if (dayCounter > daysInMonth) {
          week.push(dayCounter - daysInMonth);
        } else {
          week.push(dayCounter);
        }
        dayCounter++;
      }
      calendar.push(week);
    }
    this.setData({ calendar });
  },

  // 切换到上一月
  prevMonth: function () {
    let year = this.data.year;
    let month = this.data.month - 1;
    if (month < 1) {
      year--;
      month = 12;
    }
    this.setData({ year, month }, () => {
      this.generateCalendar();
    });
  },

  // 切换到下一月
  nextMonth: function () {
    let year = this.data.year;
    let month = this.data.month + 1;
    if (month > 12) {
      year++;
      month = 1;
    }
    this.setData({ year, month }, () => {
      this.generateCalendar();
    });
  },
});

结语

到这里以上代码都以粘贴完毕，如果有问题欢迎各位jy们评论、点赞、关注、私信，不定期更新文章。