当前位置：首页 > VUE

vue滚动实现日历组件

2026-02-21 03:35:38VUE

实现思路

使用Vue实现滚动日历组件，核心在于动态生成日期数据，结合CSS实现横向或纵向滚动效果。通常需要处理日期计算、滚动事件监听以及交互逻辑。

基本结构

<template>
  <div class="calendar-container" ref="container">
    <div class="calendar-wrapper" ref="wrapper">
      <div 
        v-for="(day, index) in visibleDays" 
        :key="index" 
        class="day-item"
        :class="{ 'active': isActive(day) }"
        @click="selectDay(day)"
      >
        <div class="day-week">{{ day.week }}</div>
        <div class="day-date">{{ day.date }}</div>
      </div>
    </div>
  </div>
</template>

核心逻辑

export default {
  data() {
    return {
      currentDate: new Date(),
      visibleDays: [],
      selectedDate: null
    }
  },
  mounted() {
    this.generateDays(30); // 生成30天的数据
    this.setupScroll();
  },
  methods: {
    generateDays(count) {
      const days = [];
      for (let i = -count; i <= count; i++) {
        const date = new Date();
        date.setDate(this.currentDate.getDate() + i);
        days.push({
          date: date.getDate(),
          week: ['日', '一', '二', '三', '四', '五', '六'][date.getDay()],
          fullDate: date
        });
      }
      this.visibleDays = days;
    },

    setupScroll() {
      const container = this.$refs.container;
      const wrapper = this.$refs.wrapper;

      // 实现惯性滚动效果
      let isDragging = false;
      let startX = 0;
      let scrollLeft = 0;

      container.addEventListener('mousedown', (e) => {
        isDragging = true;
        startX = e.pageX - container.offsetLeft;
        scrollLeft = container.scrollLeft;
      });

      container.addEventListener('mouseleave', () => {
        isDragging = false;
      });

      container.addEventListener('mouseup', () => {
        isDragging = false;
      });

      container.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        e.preventDefault();
        const x = e.pageX - container.offsetLeft;
        const walk = (x - startX) * 2;
        container.scrollLeft = scrollLeft - walk;
      });
    },

    selectDay(day) {
      this.selectedDate = day.fullDate;
    },

    isActive(day) {
      return this.selectedDate && 
             day.fullDate.toDateString() === this.selectedDate.toDateString();
    }
  }
}

CSS样式

.calendar-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

.calendar-wrapper {
  display: inline-flex;
  padding: 0 10px;
}

.day-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  margin: 0 2px;
  cursor: pointer;
  border-radius: 4px;

  &.active {
    background-color: #1890ff;
    color: white;
  }
}

.day-week {
  font-size: 12px;
  margin-bottom: 4px;
}

.day-date {
  font-size: 16px;
  font-weight: bold;
}

优化方向

性能优化：使用虚拟滚动技术，只渲染可视区域内的日期元素
无限滚动：监听滚动事件，动态加载更多日期数据
动画效果：添加平滑滚动和点击动画
响应式设计：适配不同屏幕尺寸
周/月模式切换：支持按周或按月显示不同视图

虚拟滚动实现示例

对于大量日期数据，可考虑虚拟滚动方案：

setupVirtualScroll() {
  const container = this.$refs.container;
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 加载更多数据
        this.loadMoreDays();
      }
    });
  }, {
    root: container,
    threshold: 0.1
  });

  // 观察最后一个元素
  observer.observe(this.$refs.lastItem);
}

通过合理设计数据结构和渲染逻辑，可以创建出流畅的滚动日历组件，满足各种业务场景需求。

vue滚动实现日历组件