微信小程序签到日历

最新推荐文章于 2024-04-06 09:40:16 发布

歪歪的橘猫

最新推荐文章于 2024-04-06 09:40:16 发布

阅读量1.9k

点赞数 4

分类专栏：日历签到日历签到文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/zzaixiao/article/details/125169655

版权

本文介绍了一次项目开发中，由于现有组件无法满足需求，作者自行封装微信小程序签到日历组件的过程。文章包含组件界面展示、wxml、js和wxss代码片段，以及组件的使用说明。

摘要由CSDN通过智能技术生成

微信小程序签到日历：

项目开发需要做一个签到日历，看了几个已封装的组件都不满足需求，于是动手封装了一个

组件界面：

在这里插入图片描述
可以扫码查看是否符合自己的需求，案列中的签到日期是随机生成的，所以切换月后签到日期会不一致

wxml：

<!--components/calendar/index.wxml-->
<view>
  <view class="calendar-header">
    <view class="icon-operate icon-pre" bindtap="handlePreMonth">◀</view>
    <view class="calender-header-date">{
  { currentYear }}/{
  { tools.formatZero(currentMonth) }}</view>
    <view class="icon-operate icon-next {
    { isDisabledNextMonth ? 'disabled' : '' }}" bindtap="handleNextMonth">▶</view>
  </view>
  <view class="calendar-body">
    <view class="calendar-week flex-wrap">
      <view wx:for="{
    { weekList }}" wx:key="index" class="days-col">{
  { item }}</view>
    </view>
    <view class="calendar-days flex-wrap">
      <!-- is-today: 是否今日，is-signed: 是否选中，is-signed: 是否签到 -->
      <view wx:for="{
    { monthDayList }}" wx:key="index" class="days-col {
    { item.date == today ? 'is-today' : '' }} {
    { item.date == selectedDate ? 'is-checked' : '' }} {
    { tools.isSigned(item.date, formatSignedList) ? 'is-signed' : '' }}" data-item="{
    { item }}" bindtap="handleSelectDate">
        <view class="days-col-text">{
  { item ? tools.formatZero(item.day) : '' }} </view>
        <view class="icon-signed">{
  { tools.isSigned(item.date, formatSignedList) ? '✔' : '' }}</view>
      </view>
    </view>
  </view>
</view>

<wxs module="tools">
  // 是否签到
  function isSigned(date, list) {
    if (list.indexOf(date) > -1) {
      return true
    }
    return false
  }
  // 十位数补0
  function formatZero(number) {
    if (number < 10 && number > 0) {
      number = '0' + number
    }
    return number
  }

  module.exports = {
    isSigned: isSigned,
    formatZero: formatZero
  }
</