小程序实现横向滑动日历效果

如下是小程序实现横向滑动日历效果的完整攻略：

步骤一：页面布局

页面布局一般使用scroll-view实现横向滑动效果。具体地，在scroll-view中添加一个日历视图即可。通常我们使用一个表格来实现日历视图，表格中的每个格子代表一个日期。代码示例如下：

<scroll-view scroll-x="true" class="calendar-scroll">
  <table class="calendar-table">
    <thead>
      <tr>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
      <!-- ...  -->
    </tbody>
  </table>
</scroll-view>

上述代码中，calendar-scroll和calendar-table是我们自定义的样式类。

步骤二：日期处理

在小程序中，我们可以使用moment.js进行日期的处理。在开始使用moment.js之前，我们需要先安装该库。在项目根目录下打开命令行窗口，运行如下命令：

npm install moment --save

安装成功之后，在小程序页面中引入moment.js库：

const moment = require('moment');

然后，我们可以使用moment.js中的方法获取到当前日期，以及当前月份的总天数等信息。示例如下：

const today = moment(); // 当前日期
const daysInMonth = today.daysInMonth(); // 当前月份的总天数

步骤三：渲染日历

我们可以使用 for 循环来渲染日历表格中的每个日期。渲染时需要注意以下几点：

1. 首先需要确定该月份第一天是星期几，以便在表格中对空白格做出正确的处理。
2. 日期需要按照从左到右、从上到下的顺序依次排列。
3. 日期需要使用 moment.js 格式化为 YYYY-MM-DD 的形式。

示例代码如下：

const firstDayOfMonth = moment().startOf('month').day(); // 该月第一天是星期几
const calendarData = []; // 保存日历表格数据的数组
let row = 0; // 当前行号
let col = firstDayOfMonth; // 当前列号

// 将第一天对应的星期几之前的空白格子添加到日历数据数组中
for (let i = 0; i < firstDayOfMonth; i++) {
  calendarData[row] = calendarData[row] || [];
  calendarData[row].push('');
}

// 生成该月份的日历表格数据
for (let i = 1; i <= daysInMonth; i++) {
  calendarData[row] = calendarData[row] || [];
  calendarData[row].push(moment().set('date', i).format('YYYY-MM-DD'));

  if (col === 6) { // 每个星期日需要换行
    row++;
    col = -1;
  }

  col++;
}

// 如果最后一行不满 7 列（星期日到星期六），需要补齐留空的格子
if (col !== 0) {
  for (let i = col; i < 7; i++) {
    calendarData[row].push('');
  }
}

然后我们将渲染好的日历数据calendarData插入到我们上述的页面布局之中，即可展示横向滑动日历效果。

示例一：添加点击事件

我们可以通过 bindtap 绑定点击事件，使得当用户点击某个日期格子时，触发相应的操作。例如，我们可以在用户点击对应日期之后，跳转到该日期对应的活动页面，从而实现“以日历方式展示活动列表，点击日历中的某一项跳转至对应日期的活动列表”的功能。

<scroll-view scroll-x="true" class="calendar-scroll">
  <table class="calendar-table">
    <thead>
      <tr>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
      </tr>
    </thead>
    <tbody>
      <tr wx:for="{{ calendarData }}" wx:key="{{ index }}" class="calendar-row">
        <td wx:for="{{ item }}" wx:key="{{ index }}" class="calendar-cell" bindtap="onClickCalendarCell">{{ item }}</td>
      </tr>
    </tbody>
  </table>
</scroll-view>

Page({
  onClickCalendarCell(event) {
    const selectedDate = event.target.dataset.date;

    // 跳转到该日期对应的活动列表页面
    wx.navigateTo({
      url: '/pages/events/list?date=' + selectedDate,
    });
  }
})

示例二：自定义样式

我们可以使用 ::after 和 ::before 伪元素添加一些装饰效果，优化页面视觉样式。

.calendar-scroll {
  width: 100%;
  height: 180px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  border: 1px solid #eee;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 10px;
}

.calendar-table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}

.calendar-table th,
.calendar-table td {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}

.calendar-table th {
  background-color: #f5f5f5;
}

.calendar-row:first-child .calendar-cell:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  border-left: 2px solid #eee;
}

.calendar-row:first-child .calendar-cell:last-child::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px;
  border-right: 2px solid #eee;
}

.calendar-cell::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  border-left: 2px solid #eee;
}

.calendar-cell::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px;
  border-right: 2px solid #eee;
}

.calendar-cell:hover {
  cursor: pointer;
  background-color: #f7f7f7;
}

.calendar-cell-active {
  background-color: #4f9eff;
  color: #fff;
}

然后在点击格子时，我们可以通过添加或移除一个名为 calendar-cell-active 的样式类，实现选中格子的效果。示例代码如下：

onClickCalendarCell(event) {
  // 移除之前选中的格子的样式类
  const prevSelectedCell = this.data.selectedCell;
  if (prevSelectedCell) {
    prevSelectedCell.classList.remove('calendar-cell-active');
  }

  // 添加当前选中的格子的样式类
  const selectedCell = event.target;
  selectedCell.classList.add('calendar-cell-active');
  this.setData({
    selectedCell: selectedCell,
  });
}

好了，以上就是小程序实现横向滑动日历效果的完整攻略。希望能够对你有所帮助。