vant 日历组件优化

vant日历组件优化

vant组件现状

1. min-date 如果不设置默认当前日期
2. max-date 如果不设置当前日期的六个月后
   目的：这个组件这么设置的目的就是为了节省性能

公司需求

1. min-data 可无限小 可以选择到1970 年
2. max-data 可无限大 可以选择很久以后的时间
   问题：如果单纯的设置min-date 为new Date(1970,0,1)、max-date为new Date(2099,11,31) 这样会导致超大量的dom 结构，会导致打开页面非常 的卡顿

为了解决此问题我们可以滚动加载日历，让日历结构保持在3年内

1. van-calendar 提供month-show api（当某个月份进入可视区域时触发）
   ps:我们可以利用此API做到滚动加载日历
   伪代码

// 获取当前年
  const currentYear = moment().toObject().years
  设置一个 初始化的min-data 和max-date
  const minDate= new Date(currentYear - 1, 0 , 1)
  const maxDate = new Date(currentYear + 1, 11 , 31)
  // 当month-show 执行时
  monthShow (date) {
  const {date, time} = date
   const minCurrentYear = moment(minDate).toObject().years
   const maxCurrentYear = moment(maxDate).toObject().years
  const current. =  moment(date).toObject().years
  if (currentYear === minCurrentYear) {
          this.minDate = new Date(minCurrentYear - 1, 0, 1)
          dom.scrollTop = 6636 // 解决上滑动跨年 否则向上滑动的时候会有出现跨年
   }
    if (currentYear === maxCurrentYear) {
          this.maxDate = new Date(maxCurrentYear + 1,11,31)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这样就解决卡顿的问题了～