v2版本的DatePicker日期选择组件选中区域高度在某些机型上的高度bug及解决方案

[damonyoungcc]

Version of antd-mobile

v2

Operating system and its version

Android

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

如下图，在大多数机型中都可以正常显示，但是在某些机型中（mate 40 鸿蒙系统 或 某些小米机型），选中高亮区域高度会变得很高

Relevant log output

No response

[awmleer]

要不转成 discussion 吧？issue close 了就不好找到了 😵

[damonyoungcc]

原因分析

初步分析，原因是am-picker-col-mask的backgroundSize的高度出现错误导致，如下图

然后往上追溯源码，发现v2的日期组件最终依赖 -> rmc-picker

查看源码后，发现backgroundSize行内样式高度的设置代码，在这里 第178行，下面是源码

    const { contentRef, indicatorRef, maskRef, rootRef } = this;
    const rootHeight = rootRef.getBoundingClientRect().height;
    // https://github.com/react-component/m-picker/issues/18
    const itemHeight = this.itemHeight = indicatorRef.getBoundingClientRect().height;
    let num = Math.floor(rootHeight / itemHeight);
    if (num % 2 === 0) {
      num--;
    }
    num--;
    num /= 2;
    contentRef.style.padding = `${itemHeight * num}px 0`;
    indicatorRef.style.top = `${itemHeight * num}px`;
    maskRef.style.backgroundSize = `100% ${itemHeight * num}px`;

经过验证发现，getBoundingClientRect获取的高度，在某些机型上可能会是浮点数，因此导致num计算出现错误，从而导致设置mask的backgroundSize错误。
在出问题的机型上打印结果，果然如此，如下图

[damonyoungcc]

要不转成 discussion 吧？issue close 了就不好找到了 😵

好的

[awmleer]

done 我操作了

[damonyoungcc]

目前我的解决方案：

在计算num的时候，把原先的Math. floor改成Math. round即可，如果只想在业务端快速修复bug，思路是在DatePicker的onVisibleChange回调中（文档中并没有标出有这个方法，源码中是提供了此方法的，戳这里 ） 重写计算num设置backgroundSize等相关的逻辑。

const onVisibleChange = (visible) => {
  if (visible) {
    setTimeout(() => {
      const maskElementList = document.querySelectorAll(".am-picker-col-mask");
      const rootElementList = document.querySelectorAll(".am-picker-col");
      const itemElementList = document.querySelectorAll(".am-picker-col-indicator");
      const contentElementList = document.querySelectorAll(".am-picker-col-content");

      const rootHeight = rootElementList[0].getBoundingClientRect().height;
      const itemHeight = itemElementList[0].getBoundingClientRect().height;

      let num = Math.round(rootHeight / itemHeight);
      if (num % 2 === 0) {
        num--;
      }
      num--;
      num /= 2;

      contentElementList.forEach((item: HTMLElement) => {
        item.style.padding = `${itemHeight * num}px 0`;
      });
      itemElementList.forEach((item: HTMLElement) => {
        item.style.top = `${itemHeight * num}px`;
      });
      maskElementList.forEach((item: HTMLElement) => {
        item.style.backgroundSize = `100% ${itemHeight * num}px`;
      });
    });
  }
};