当前位置：首页 > VUE

vue 实现日期滚动

2026-02-17 06:18:21VUE

实现日期滚动的思路

使用Vue实现日期滚动功能，可以通过动态生成日期列表并结合CSS动画或JavaScript滚动控制来实现。核心在于管理日期数据的状态和渲染逻辑。

基本实现步骤

安装依赖（如需要）

npm install vue-awesome-swiper  # 可选，用于更复杂的滚动效果

基础模板结构

vue 实现日期滚动

<template>
  <div class="date-scroller">
    <div class="date-wrapper" ref="wrapper">
      <div 
        v-for="(date, index) in dateList" 
        :key="index" 
        class="date-item"
        :class="{ active: isActive(index) }"
        @click="selectDate(index)"
      >
        {{ date.display }}
      </div>
    </div>
  </div>
</template>

核心逻辑实现

数据定义与方法

<script>
export default {
  data() {
    return {
      dateList: [],
      currentIndex: 0,
      daysToShow: 7 // 显示的天数
    }
  },
  created() {
    this.generateDates();
  },
  methods: {
    generateDates() {
      const dates = [];
      for (let i = -3; i <= 3; i++) {
        const date = new Date();
        date.setDate(date.getDate() + i);
        dates.push({
          date: date,
          display: `${date.getMonth()+1}/${date.getDate()}`
        });
      }
      this.dateList = dates;
    },
    isActive(index) {
      return index === this.currentIndex;
    },
    selectDate(index) {
      this.currentIndex = index;
      // 可以添加平滑滚动效果
      this.scrollToSelected();
    },
    scrollToSelected() {
      const wrapper = this.$refs.wrapper;
      const selected = wrapper.children[this.currentIndex];
      wrapper.scrollTo({
        left: selected.offsetLeft - wrapper.offsetWidth/2 + selected.offsetWidth/2,
        behavior: 'smooth'
      });
    }
  }
}
</script>

样式设计

基础滚动样式

vue 实现日期滚动

<style scoped>
.date-scroller {
  overflow: hidden;
  width: 100%;
}
.date-wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 0;
  -webkit-overflow-scrolling: touch;
}
.date-item {
  scroll-snap-align: center;
  flex: 0 0 auto;
  padding: 8px 16px;
  margin: 0 5px;
  border-radius: 20px;
  background: #f0f0f0;
  cursor: pointer;
}
.date-item.active {
  background: #42b983;
  color: white;
}
</style>

高级实现方案

使用第三方库实现更流畅的滚动

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

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

模板调整为

<swiper :slides-per-view="5" :centered-slides="true">
  <swiper-slide v-for="(date, index) in dateList" :key="index">
    <!-- 日期显示内容 -->
  </swiper-slide>
</swiper>

无限滚动实现

动态加载更多日期

methods: {
  handleScroll() {
    const wrapper = this.$refs.wrapper;
    if (wrapper.scrollLeft < 50) {
      this.prependDates();
    } 
    if (wrapper.scrollLeft + wrapper.offsetWidth > wrapper.scrollWidth - 50) {
      this.appendDates();
    }
  },
  prependDates() {
    // 向前添加日期逻辑
  },
  appendDates() {
    // 向后添加日期逻辑
  }
}