当前位置：首页 > VUE

vue实现滑动日期

2026-01-19 08:24:26VUE

实现滑动日期选择器的基本思路

在Vue中实现滑动日期选择器可以通过结合第三方库或自定义组件完成。核心逻辑包括日期数据的生成、滑动动画的实现以及用户交互处理。

使用第三方库（如vant）

安装vant库的日期选择器组件：

npm install vant

引入组件并配置滑动日期选择：

<template>
  <van-datetime-picker
    v-model="currentDate"
    type="date"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="onConfirm"
  />
</template>

<script>
import { DatetimePicker } from 'vant';
export default {
  components: { VanDatetimePicker: DatetimePicker },
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    };
  },
  methods: {
    onConfirm(value) {
      console.log('Selected:', value);
    }
  }
};
</script>

自定义滑动日期组件

创建可横向滑动的日期列表组件：

<template>
  <div class="date-slider">
    <div 
      class="dates" 
      ref="datesContainer"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      <div 
        v-for="(date, index) in dateList" 
        :key="index"
        class="date-item"
        :class="{ active: isActive(index) }"
      >
        {{ formatDate(date) }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateList: this.generateDates(),
      startX: 0,
      translateX: 0,
      currentIndex: 0
    };
  },
  methods: {
    generateDates() {
      const dates = [];
      const today = new Date();
      for (let i = -7; i <= 7; i++) {
        const date = new Date();
        date.setDate(today.getDate() + i);
        dates.push(date);
      }
      return dates;
    },
    formatDate(date) {
      return `${date.getMonth()+1}/${date.getDate()}`;
    },
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    handleTouchMove(e) {
      const moveX = e.touches[0].clientX - this.startX;
      this.$refs.datesContainer.style.transform = `translateX(${this.translateX + moveX}px)`;
    },
    handleTouchEnd(e) {
      const endX = e.changedTouches[0].clientX;
      const diff = endX - this.startX;

      if (Math.abs(diff) > 50) {
        this.currentIndex += diff > 0 ? -1 : 1;
        this.currentIndex = Math.max(0, Math.min(this.dateList.length - 1, this.currentIndex));
      }

      this.updatePosition();
    },
    updatePosition() {
      const itemWidth = 80; // 假设每个日期项宽度为80px
      this.translateX = -this.currentIndex * itemWidth;
      this.$refs.datesContainer.style.transform = `translateX(${this.translateX}px)`;
      this.$refs.datesContainer.style.transition = 'transform 0.3s ease';
    },
    isActive(index) {
      return index === this.currentIndex;
    }
  }
};
</script>

<style>
.date-slider {
  overflow: hidden;
  width: 100%;
}
.dates {
  display: flex;
  white-space: nowrap;
}
.date-item {
  width: 80px;
  padding: 10px;
  text-align: center;
  border: 1px solid #eee;
}
.date-item.active {
  background: #1989fa;
  color: white;
}
</style>