vant日历组件优化
vant组件现状
- min-date 如果不设置默认当前日期
- max-date 如果不设置当前日期的六个月后
目的:这个组件这么设置的目的就是为了节省性能
公司需求
- min-data 可无限小 可以选择到1970 年
- max-data 可无限大 可以选择很久以后的时间
问题:如果单纯的设置min-date 为new Date(1970,0,1)、max-date为new Date(2099,11,31) 这样会导致超大量的dom 结构,会导致打开页面非常 的卡顿
为了解决此问题我们可以滚动加载日历,让日历结构保持在3年内
- 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) } }
复制
这样就解决卡顿的问题了~