当前位置：首页 > VUE

vue滚动实现日历组件

2026-01-20 11:34:45VUE

实现思路

基于Vue实现滚动日历组件的核心在于动态生成日期数据，并通过CSS和触摸事件实现平滑滚动效果。关键在于处理日期计算、渲染优化和交互逻辑。

基础结构设计

<template>
  <div class="calendar-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <div class="calendar-wrapper" :style="{ transform: `translateY(${translateY}px)` }">
      <div v-for="(week, index) in visibleWeeks" :key="index" class="week-row">
        <div v-for="day in week.days" :key="day.date" class="day-cell" @click="selectDay(day)">
          <div :class="{ 'current-day': day.isToday, 'selected-day': day.isSelected }">
            {{ day.day }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

日期数据生成

使用JavaScript的Date对象进行日期计算，生成连续数周的日期数据：

data() {
  return {
    currentDate: new Date(),
    visibleWeeks: [],
    translateY: 0,
    startY: 0,
    currentY: 0
  }
},
methods: {
  generateWeeks(centerDate, weekCount = 10) {
    const weeks = [];
    const startDate = new Date(centerDate);
    startDate.setDate(startDate.getDate() - startDate.getDay() - weekCount * 7 / 2);

    for (let i = 0; i < weekCount; i++) {
      const weekStart = new Date(startDate);
      weekStart.setDate(weekStart.getDate() + i * 7);

      const days = [];
      for (let j = 0; j < 7; j++) {
        const dayDate = new Date(weekStart);
        dayDate.setDate(dayDate.getDate() + j);

        days.push({
          date: dayDate.toISOString().split('T')[0],
          day: dayDate.getDate(),
          isToday: this.isSameDay(dayDate, new Date()),
          isSelected: false
        });
      }

      weeks.push({ days });
    }
    return weeks;
  },
  isSameDay(date1, date2) {
    return date1.getFullYear() === date2.getFullYear() &&
           date1.getMonth() === date2.getMonth() &&
           date1.getDate() === date2.getDate();
  }
}

触摸滚动实现

通过触摸事件计算位移并应用CSS变换：

methods: {
  handleTouchStart(e) {
    this.startY = e.touches[0].clientY;
    this.currentY = this.translateY;
  },
  handleTouchMove(e) {
    const deltaY = e.touches[0].clientY - this.startY;
    this.translateY = this.currentY + deltaY;
    e.preventDefault();
  },
  handleTouchEnd() {
    // 惯性滚动和边界检查逻辑
    const containerHeight = this.$el.clientHeight;
    const wrapperHeight = this.$el.querySelector('.calendar-wrapper').clientHeight;

    if (this.translateY > 0) {
      this.translateY = 0;
    } else if (this.translateY < containerHeight - wrapperHeight) {
      this.translateY = containerHeight - wrapperHeight;
    }
  }
}

样式优化

确保日历项正确布局并优化滚动性能：

vue滚动实现日历组件

.calendar-container {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.calendar-wrapper {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.week-row {
  display: flex;
  height: 50px;
}

.day-cell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.current-day {
  background-color: #42b983;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selected-day {
  border: 2px solid #42b983;
  border-radius: 50%;
}

性能优化技巧

使用will-change: transform提升CSS动画性能
限制渲染的周数，采用虚拟滚动技术处理大量数据
使用requestAnimationFrame优化动画帧率
避免在滚动过程中频繁触发数据更新

完整组件示例

export default {
  data() {
    return {
      currentDate: new Date(),
      visibleWeeks: [],
      translateY: 0,
      startY: 0,
      currentY: 0,
      selectedDate: null
    }
  },
  created() {
    this.visibleWeeks = this.generateWeeks(this.currentDate, 20);
  },
  methods: {
    // 前面提到的所有方法...
    selectDay(day) {
      this.visibleWeeks.forEach(week => {
        week.days.forEach(d => {
          d.isSelected = d.date === day.date;
        });
      });
      this.selectedDate = day.date;
      this.$emit('date-selected', day.date);
    }
  }
}

这种实现方式支持触摸滚动、日期选择和当前日标记，可根据需求扩展更多功能如月份标记、事件标记等。