vue实现一个滚动日期选择器组件

最新推荐文章于 2025-04-04 09:03:44 发布

木木林_

最新推荐文章于 2025-04-04 09:03:44 发布

阅读量6.5k

点赞数 11

分类专栏： vue 文章标签： javascript vue

本文链接：https://blog.youkuaiyun.com/qq_44812835/article/details/111036036

版权

本文介绍了如何在Vue中实现一个滚动日期选择器组件，包括UI设计、数据初始化、事件处理、滚动校正等关键步骤，以及在开发过程中可能遇到的问题和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日期选择器组件

1.先来看看实现效果
在这里插入图片描述

2.在开发之前，要先了解清楚需要完成的需求再逐个优化（以下主要介绍思路具体实现，随机应变）

1） UI方面我们需要实现上下滚动选择，需要注意的主要细节就是滚动结束后，需要自动校正位置，比如正好滚动到两个年份之间，这时应该自动滚向占比比较大的一方

2）第二个需要注意的就是每月的天数是不同的，1 3 5 7 8 10 12 有31天，2月闰年29天平年28天，剩余月份30天
（year % 4 === 0 && year % 100 !== 0 || year % 400 === 0为闰年）

3.实现步骤

1）首先我们要考虑的就是这些年月日的初始化数据，我们可以看到当滚动到最下，或者最上时都是留白的所以就需要数据初始话的时候前后都添加空数据比如月份：

month: ['', '', '', 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, '', '', '']

年份初动态初始化为当前年份的上下100年，日暂时初始化为31天

2）数据的绑定以月为例

<div class="month" ref="month" @scroll="monthScroll">
  <li v-for="(item,index) in month" :key="index" :ref="'item'+index" class="item">
    {
   {
    item ? item + $t('mouth') : item }}
  </li>
</div>

data () {
   
return {
      
      date: [Date.getFullYear, 12, 1],
      month: ['', '', '', 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, '', '', ''],
      }
},
mounted () {
   
   this.itemHeight = this.$refs.item0