当前位置：首页 > VUE

vue 实现日期滚动

2026-03-08 18:32:23VUE

实现日期滚动的思路

在Vue中实现日期滚动功能，可以通过动态生成日期列表并绑定到滚动容器中。核心在于监听滚动事件，动态加载更多日期数据或切换当前显示的日期范围。

基础实现方法

安装依赖（如需要滑动效果）：

npm install vue-touch-events

组件模板部分：

<template>
  <div class="date-scroller" @scroll="handleScroll">
    <div v-for="(date, index) in dates" :key="index" 
         :class="{ 'active': isActive(date) }"
         @click="selectDate(date)">
      {{ formatDate(date) }}
    </div>
  </div>
</template>

核心逻辑实现

脚本部分：

export default {
  data() {
    return {
      currentDate: new Date(),
      dates: [],
      visibleRange: 7 // 显示的天数
    }
  },
  created() {
    this.generateDates()
  },
  methods: {
    generateDates() {
      this.dates = []
      for (let i = -this.visibleRange; i <= this.visibleRange; i++) {
        const date = new Date()
        date.setDate(this.currentDate.getDate() + i)
        this.dates.push(date)
      }
    },
    formatDate(date) {
      return date.toLocaleDateString('zh-CN', { 
        month: 'numeric', 
        day: 'numeric',
        weekday: 'short'
      })
    },
    isActive(date) {
      return date.toDateString() === this.currentDate.toDateString()
    },
    selectDate(date) {
      this.currentDate = date
    },
    handleScroll(e) {
      const { scrollLeft, scrollWidth, clientWidth } = e.target
      if (scrollLeft === 0) {
        this.loadMoreDates('prev')
      } else if (scrollLeft + clientWidth >= scrollWidth - 50) {
        this.loadMoreDates('next')
      }
    },
    loadMoreDates(direction) {
      const newDates = []
      if (direction === 'prev') {
        const firstDate = new Date(this.dates[0])
        firstDate.setDate(firstDate.getDate() - this.visibleRange)
        for (let i = 0; i < this.visibleRange; i++) {
          const date = new Date(firstDate)
          date.setDate(date.getDate() + i)
          newDates.push(date)
        }
        this.dates = [...newDates, ...this.dates]
      } else {
        const lastDate = new Date(this.dates[this.dates.length - 1])
        lastDate.setDate(lastDate.getDate() + 1)
        for (let i = 0; i < this.visibleRange; i++) {
          const date = new Date(lastDate)
          date.setDate(date.getDate() + i)
          newDates.push(date)
        }
        this.dates = [...this.dates, ...newDates]
      }
    }
  }
}

样式优化

CSS部分：

.date-scroller {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
  padding: 10px 0;
}

.date-scroller div {
  padding: 8px 16px;
  margin: 0 5px;
  border-radius: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

.date-scroller div.active {
  background-color: #42b983;
  color: white;
}

使用第三方库实现

对于更复杂的滚动效果，可以考虑使用第三方库：

import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  // ...其他逻辑
}

模板调整为：

vue 实现日期滚动

<swiper :slides-per-view="5" :centered-slides="true" @slide-change="onSlideChange">
  <swiper-slide v-for="(date, index) in dates" :key="index">
    <div @click="selectDate(date)" :class="{ active: isActive(date) }">
      {{ formatDate(date) }}
    </div>
  </swiper-slide>
</swiper>