当前位置：首页 > VUE

vue实现日历周滑动

2026-02-23 17:30:37VUE

Vue 实现日历周滑动功能

核心思路

日历周滑动通常需要结合触摸事件或手势库实现左右滑动切换周数。Vue中可通过计算属性动态生成每周日期数据，结合CSS过渡效果和触摸事件监听完成交互。

实现步骤

安装依赖（可选） 如需更流畅的手势支持，可安装hammerjs或v-touch库：

npm install hammerjs

基础模板结构

<template>
  <div 
    class="calendar-week" 
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <div class="week-container" :style="weekStyle">
      <div v-for="(day, index) in currentWeek" :key="index" class="day">
        <div class="weekday">{{ day.weekday }}</div>
        <div class="date">{{ day.date }}</div>
      </div>
    </div>
  </div>
</template>

JavaScript 逻辑

export default {
  data() {
    return {
      currentDate: new Date(),
      touchStartX: 0,
      touchEndX: 0,
      offsetX: 0,
      isSwiping: false
    }
  },
  computed: {
    currentWeek() {
      const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
      const startOfWeek = this.getStartOfWeek(this.currentDate);

      return Array.from({ length: 7 }).map((_, i) => {
        const date = new Date(startOfWeek);
        date.setDate(date.getDate() + i);
        return {
          weekday: weekdays[date.getDay()],
          date: date.getDate(),
          fullDate: date
        };
      });
    },
    weekStyle() {
      return {
        transform: `translateX(${this.offsetX}px)`,
        transition: this.isSwiping ? 'none' : 'transform 0.3s ease'
      };
    }
  },
  methods: {
    getStartOfWeek(date) {
      const d = new Date(date);
      const day = d.getDay();
      const diff = d.getDate() - day + (day === 0 ? -6 : 1);
      return new Date(d.setDate(diff));
    },
    handleTouchStart(e) {
      this.touchStartX = e.touches[0].clientX;
      this.isSwiping = true;
    },
    handleTouchMove(e) {
      this.touchEndX = e.touches[0].clientX;
      this.offsetX = this.touchEndX - this.touchStartX;
    },
    handleTouchEnd() {
      this.isSwiping = false;
      const threshold = 50;

      if (this.offsetX > threshold) {
        this.prevWeek();
      } else if (this.offsetX < -threshold) {
        this.nextWeek();
      }

      this.offsetX = 0;
    },
    nextWeek() {
      const newDate = new Date(this.currentDate);
      newDate.setDate(newDate.getDate() + 7);
      this.currentDate = newDate;
    },
    prevWeek() {
      const newDate = new Date(this.currentDate);
      newDate.setDate(newDate.getDate() - 7);
      this.currentDate = newDate;
    }
  }
}

CSS 样式

.calendar-week {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.week-container {
  display: flex;
  width: 100%;
}

.day {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  min-width: calc(100% / 7);
}

.weekday {
  font-size: 12px;
  color: #666;
}

.date {
  font-size: 16px;
  margin-top: 4px;
}

进阶优化

添加周数指示器 可在顶部添加当前周数显示：

<div class="week-header">
  {{ currentDate | weekRange }}
</div>

添加过滤器

filters: {
  weekRange(date) {
    const start = this.getStartOfWeek(date);
    const end = new Date(start);
    end.setDate(end.getDate() + 6);
    return `${start.getMonth()+1}月${start.getDate()}日 - ${end.getMonth()+1}月${end.getDate()}日`;
  }
}

使用手势库（示例使用hammerjs）

vue实现日历周滑动

import Hammer from 'hammerjs';

mounted() {
  const mc = new Hammer(this.$el);
  mc.on('swipeleft', this.nextWeek);
  mc.on('swiperight', this.prevWeek);
}