小程序实现带年月选取效果的日历

下面是关于小程序实现带年月选取效果的日历的完整攻略：

一、实现思路

1. 获取当前日期的年和月以及当月的天数；
2. 使用数据渲染模板，并在相应的日期上添加样式；
3. 实现滑动切换月份功能；
4. 添加点击事件，实现从日历中选择日期并将该日期传递给父组件。

二、具体实现

下面我们将通过两个示例来说明具体实现步骤。

示例一

首先，我们需要在 wxml 文件中编写日历的结构，并通过 wx:for 和 wx:if 循环渲染出每一个日期。代码示例如下：

<view class="calendar">
  <view class="calendar-header">
    <view class="calendar-header-prev"></view>
    <view>{{ year }}年{{ month }}月</view>
    <view class="calendar-header-next"></view>
  </view>
  <view class="calendar-row">
    <view class="calendar-col" wx:for="{{ weekDayList }}" wx:key="{{ index }}">{{ item }}</view>
  </view>
  <view class="calendar-row" wx:for="{{ dateList }}" wx:key="{{ index }}">
    <view class="calendar-col {{ item.type }}" wx:if="{{ item.text != '' }}" data-date="{{ item.date }}" bindtap="selectDate">{{ item.text }}</view>
    <view class="calendar-col {{ item.type }}" wx:if="{{ item.text == '' }}"></view>
  </view>
</view>

接下来，我们需要在 js 文件中实现相应的逻辑。具体实现步骤如下：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    dateList: [],
    weekDayList: ['日', '一', '二', '三', '四', '五', '六']
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getDateList(this.data.year, this.data.month);
  },
  /**
   * 显示日期列表
   */
  getDateList: function (year, month) {
    var dayCount = new Date(year, month, 0).getDate();
    var dateList = [];
    for (var i = 1; i <= dayCount; i++) {
      var date = year + '-' + month + '-' + (i < 10 ? '0' + i : i);
      var text = i;
      var type = 'current-month';
      if (year == new Date().getFullYear() && month == new Date().getMonth() + 1 && i == new Date().getDate()) {
        type += ' current-day';
      }
      dateList.push({ 'date': date, 'text': text, 'type': type });
    }
    var firstDay = new Date(year, month - 1, 1).getDay();
    for (var i = 0; i < firstDay; i++) {
      dateList.unshift({ 'date': '', 'text': '', 'type': 'other-month' });
    }
    this.setData({ dateList: dateList });
  },
  /**
   * 选择日期
   */
  selectDate: function (e) {
    var date = e.currentTarget.dataset.date;
    wx.navigateBack({
      delta: 1,
      success: function () {
        var page = getCurrentPages().pop();
        if (page == undefined || page == null) return;
        page.setData({ selectedDate: date });
      }
    });
  },
  /**
   * 上个月
   */
  prevMonth: function () {
    var year = this.data.year;
    var month = this.data.month - 1;
    if (month < 1) {
      year--;
      month = 12;
    }
    this.setData({ year: year, month: month });
    this.getDateList(year, month);
  },
  /**
   * 下个月
   */
  nextMonth: function () {
    var year = this.data.year;
    var month = this.data.month + 1;
    if (month > 12) {
      year++;
      month = 1;
    }
    this.setData({ year: year, month: month });
    this.getDateList(year, month);
  }
});

在上面的代码中，我们通过 getDateList 方法获取到当前月份的天数，并根据每一个日期的类型添加相应的样式。在点击日期后，我们通过 wx.navigateBack 方法返回上一页并将选中的日期传递给父组件。

接下来，我们需要实现左右滑动切换月份的功能。我们可以使用 swiper 组件来实现滑动切换，代码示例如下：

<swiper current="{{ month - 1 }}" bindchange="swiperChange">
  <swiper-item wx:for="{{ monthList }}" wx:key="{{ index }}">
    <calendar year="{{ year }}" month="{{ item }}" selected-date="{{ selectedDate }}"></calendar>
  </swiper-item>
</swiper>

在上面的代码中，我们定义了一个 swiper 组件，并将 monthList 数组的每一个元素显示在不同的 swiper-item 中。在滑动时，我们通过 swiperChange 方法获取到当前滑块的位置并设置对应的年月。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    year: new Date().getFullYear(),
    monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    selectedDate: ''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (options.selectedDate) {
      this.setData({ selectedDate: options.selectedDate });
    }
  },
  /**
   * swiper切换
   */
  swiperChange: function (e) {
    var year = this.data.year;
    var month = e.detail.current + 1;
    this.setData({ month: month });
  }
});

通过上述步骤，我们就可以实现一个带有年月选取效果的日历组件了。

示例二

除了使用 swiper 组件，我们还可以在页面中加入 scroll-view 组件，通过手势滑动来实现切换月份的功能。具体实现步骤如下：

<scroll-view scroll-x="true" scroll-y="false" bindscrolltolower="scrollToLower">
  <view class="calendar-block" wx:for="{{ monthList }}" wx:key="{{ index }}">
    <calendar year="{{ year }}" month="{{ item }}" selected-date="{{ selectedDate }}"></calendar>
  </view>
</scroll-view>

在上面的代码中，我们将 monthList 数组的所有元素渲染到页面中，并通过 scroll-view 组件实现左右滑动效果。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    year: new Date().getFullYear(),
    monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    selectedDate: ''
  },
  /**
   * 页面滑动事件
   */
  scrollToLower: function (e) {
    var scrollLeft = e.detail.scrollLeft;
    var itemWidth = 68; // 每个日历项的宽度
    var currentIndex = Math.round(scrollLeft / itemWidth);
    var year = this.data.year;
    var month = this.data.monthList[currentIndex];
    this.setData({ month: month });
  }
});

在上面的代码中，我们通过 Math.round 方法获取到当前页的索引，并更新相应的年月。

三、总结

通过上述步骤，我们已经成功实现了一个带有年月选取效果的日历组件。其中，示例一使用了 swiper 组件，示例二则使用了 scroll-view 组件。两个示例的实现方式略有不同，但它们的实现思路是一致的。期望这个完整攻略可以帮到你~