[Bug Report] Calendar组件设置min-date、max-date和default-date时，日历初始空白

[wg5945]

设备 / 浏览器

iphone 8p

Vant 版本

2.4.7

Vue 版本

2.6.11

重现链接

https://codesandbox.io/s/vant-issue-moban-5d9nf

描述问题

Calendar组件设置min-date、max-date和default-date时，日历控件首次弹出日期全部显示空白 向上滑动一下后才能显示出来

[chenjiahan]

试了下没问题呢，你用的版本是 2.4.7 吗，这个问题之前修复过

[wg5945]

@chenjiahan

修改了下demo，vant 版本是2.4.7，加了个页面跳转比较容易再现

https://codesandbox.io/s/vant-issue-moban-o6jlc

我的手机是iphone 8p

需要滑动一下日期才会显示出来

[chenjiahan]

是在手机上偶现吗？ 我在电脑上试了下正常

[wg5945]

@chenjiahan 试验了几款手机，iphone 8p，iphone 7必现，安卓的几款貌似正常

另外chrome上我也能复现的啊，就下面那个链接直接打开 https://codesandbox.io/s/vant-issue-moban-o6jlc

[chenjiahan]

我这儿还是不能复现喔，能帮忙排查下吗

日历组件是只渲染视图区域的内容的，其他内容区域默认为空白界面，上图看起来是有问题的

[langyuxiansheng]

我也有这个问题，在部分的iOS 设置 还有小米 mix3上面 还有华为的 目前就这几个设备重现，别的都是正常的，虽然是空白，但是滑动一下就正常了。

[langyuxiansheng]

版本号：

[wg5945]

目前只能先模拟下滑动了，凑合下，复工了再说

if (document.getElementsByClassName('van-calendar__body')[0]) {
  const back = document.getElementsByClassName('van-calendar__body')[0].scrollTop
  document.getElementsByClassName('van-calendar__body')[0].scrollTop = back - 10
  setTimeout(() => {
    document.getElementsByClassName('van-calendar__body')[0].scrollTop = back
  }, 100)
}

[langyuxiansheng]

这段代码加到哪里呢

[wg5945]

@langyuxiansheng calendar弹出的时候，相当于模拟你手滑的动作

[langyuxiansheng]

 this.$nextTick(() => {
                if (document.getElementsByClassName('van-calendar__body')[0]) {
                    const back = document.getElementsByClassName('van-calendar__body')[0].scrollTop;
                    document.getElementsByClassName('van-calendar__body')[0].scrollTop = back - 10;
                    setTimeout(() => {
                        document.getElementsByClassName('van-calendar__body')[0].scrollTop = back;
                    }, 100);
                }
            });

这样才行

[langyuxiansheng]

还有bug。。。。 直接就滑到最小的那个日期了

[chenjiahan]

能否按照这个 commit 在本地修改代码试一下 @wg5945 @langyuxiansheng

对应文件：node_modules/vant/es/cadenlar/index.js

https://github.com/youzan/vant/commit/f507b99cb762f24ec45cb69477e6357d7a4bd005

[langyuxiansheng]

明天试一下呢

[chenjiahan]

已发布 2.5.0 版本，可以试一下喔

[wg5945]

@chenjiahan 更新了2.5.0，貌似并没有修复

https://codesandbox.io/s/vant-issue-moban-zb067

[chenjiahan]

找到问题了，是因为元素高度为小数导致边界情况判断有误，下个版本会修复

[wg5945]

十分感谢

[chenjiahan]

已在 2.5.1 版本修复

[qc-web-y]

我都2.5.3了还是出现这个问题，只要动态传default-date默认值就会这样

[chenjiahan]

@qc-web-y 能否提供下 codesandbox 复现链接

[zkeyword]

2.5.9 还会

[comlejade]

2.6.0 iphone8p还是有这个问题

[chenjiahan]

有木有复现链接呀？

[comlejade]

有木有复现链接呀？

不要天天回答的那么死板，谷歌浏览器的调试模式下看不出来，我的iphone8p的真机上有问题，随便搞个demo试试就有了

[comlejade]

我设置的最小值是2000/01/01,最大值是当前日期，默认值是当前日期

[comlejade]

这样可以暂时解决问题，最后减70都不行，要减80以上

[chenjiahan]

不要天天回答的那么死板，谷歌浏览器的调试模式下看不出来，我的iphone8p的真机上有问题，随便搞个demo试试就有了

每周处理几十个 issue，没时间去“试”你的问题，提供复现链接是最基本的要求。

[davecat]

2.6.0 iphone x 复现该问题。设置default-date 后会出现日历组件初始化失败情况。正如楼上描述，手指滚动下就能显示出来，但是会直接滚动到minDate 处。体验差。我这边采用了一个hack方法，用v-if重新让日历组件状态重建，解决了这个问题。感觉像是组件内部状态没处理好。这个不能修复的话，打算自己实现这个日历组件。

[comlejade]

2.6.0 iphone x 复现该问题。设置default-date 后会出现日历组件初始化失败情况。正如楼上描述，手指滚动下就能显示出来，但是会直接滚动到minDate 处。体验差。我这边采用了一个hack方法，用v-if重新让日历组件状态重建，解决了这个问题。感觉像是组件内部状态没处理好。这个不能修复的话，打算自己实现这个日历组件。

我在codesandbox上试了，没能复现这个问题，但是我项目里引入这个组件有问题，因为是内部项目无法提供源码，所以只能像上面那样凑合着用。感觉是前面有什么代码影响了，不过没找出来。新建个页面单独使用没发现问题。

[haocaiMP]

我也遇到了，vant 2.8.7 版本 ios 7p 11pro

[xiang1128]

2.10.6版本的日历在所有机型（包括模拟器上）当滑动日期到两个月份的临界点时页面和title会一直抖动，原因未知。

[wxlaionangog]

iphone6sp 系统ios13.4.1 vant 版本2.10.11 , 复现日历初始空白问题, 浏览器无法复现

使用vant 2.8.6 版本无问题

[williamtsang88]

谢谢 @wg5945 @langyuxiansheng 的代码：

this.$nextTick(() => {
                if (document.getElementsByClassName('van-calendar__body')[0]) {
                    const back = document.getElementsByClassName('van-calendar__body')[0].scrollTop;
                    document.getElementsByClassName('van-calendar__body')[0].scrollTop = back - 10;
                    setTimeout(() => {
                        document.getElementsByClassName('van-calendar__body')[0].scrollTop = back;
                    }, 100);
                }
            });

最终把这段代码放在 <van-calendar @open="onOpenCalendar" ... /> 的 open 事件调用，完美解决了 iOS 和 安卓 兼容性问题。但是我修改一下计算 scrollTop值 的参数、还有 setTimeout 的时间参数。

this.$nextTick(() => {
   if (document.getElementsByClassName('van-calendar__body')[0]) {
       const back = document.getElementsByClassName('van-calendar__body')[0].scrollTop;
       document.getElementsByClassName('van-calendar__body')[0].scrollTop = back - 100;
       setTimeout(() => {
           document.getElementsByClassName('van-calendar__body')[0].scrollTop = back;
       }, 10);
   }
 });

[llemllen]

vant 2.12.9版本 在 iphone12下也会出现

[firstbloodgh]

我升级到2.12.15了 ios真机下还是有这个问题 打开空白 滑动一下才会正常

[firstbloodgh]

我升级到2.12.15了 ios真机下还是有这个问题 打开空白 滑动一下才会正常

[zhongwenqiang]

我也遇到这个问题了，vant版本是3.0.16，设置maxDate之后就会空白，必须要滑动一下才能显示，目前的解决方案是将弹层高度改一下，默认高度是80%，改成79%后就可以了

[yogadzx]

v3.2.3遇到问题。 解决：写死高度，不要用百分比：calendarPopupHeight: '450px'

[Jiangmenghao]

遇到这个问题 +1 机型：iPad mini 6

Vant: 2.12.35 iPadOS: 15.1 Safari: 15.1

根据楼上的提示，把默认高度从80%改为79%解决了

[msyuan]

2.12.47版本还是存在这个日期初始化空白的问题哈，iphone12，部分安卓机型都有这个问题，不管是模拟滑动还是高度修改都无济于事哈

[jaykou25]

我在v3.4.9上也出现这个问题了. 但是很奇怪的是只在某一个项目上出现. 我新开了一个项目用相同的代码就没有复现.

我看了下代码, 在onScroll方法的225行

  const onScroll = () => {
      const top = getScrollTop(bodyRef.value!);
      const bottom = top + bodyHeight;

      const heights = months.value.map((item, index) =>
        monthRefs.value[index].getHeight()
      );
      const heightSum = heights.reduce((a, b) => a + b, 0);

      // iOS scroll bounce may exceed the range
      if (bottom > heightSum && top > 0) {
        return;
      }
  }

bottom是滚动高度+body高度 heightSum是body下的month页面的高度和 正常情况下heightSum比bottom高一点, 但是有些机型会出现bottom比heightSum高一点, 不超过1. 所以在这里被return掉了. 具体原因也不太清楚, 表现出来是最后一个month页面的height比常规的稍小一点, 差零点几.

在这里反馈一下

[eric-xdp]

"vant": "^2.12.47", 在 iphone12、iphone13上都出现这个问题 。调整高度百分比，iphone12解决 ，但是13还是有问题

[fengyun2]

"vant": "2.12.51", 在 iphone11 pro 出现这个问题

[weiwlwll]

"vant": "2.12.51", 在 iphone14 pro 出现这个问题

[microJ]

"vant": "3.2.6", iPhone 12 Pro Max 复现。 处理过程：

1. 设置组件高度 79% 后在Chrome 模拟器中正常、iOS simulator 正常，真机不正常。
2. 设置固定高度 630px 后真机正常 ✅。