VirtualScroll :itemHeight 单位固定成为了px，无法适配小程序

dengs-official commented 3 years ago

问题描述

使用 VirtualScroll 组件生成虚拟列表时，设置了 itemHeight 属性后，计算生成的容器总高度和子项偏移高度单位都为px，不会自动转换

版本信息

1.0.0-alpha.21

涉及的平台

weapp

错误信息

// error message here

代码

小程序用以下方式修复后可以设置正确当前页和子项的高度，在内联样式中将高度转换为了对应的px，但是在滚动时计算会出错，应该是获取到的scrollTop值有误

// packages/virtual-scroll/index.ts

// line-116
const top = convertToUnit(index * __itemHeight.value, 'rpx');

// line-154
height: convertToUnit((props.items.length * __itemHeight.value), 'rpx'),

b2nil commented 3 years ago

需要使用 pxTransform 来转换单位，convertToUnit 只能把数字加上固定单位，不能转换。有兴趣的话，可以提一个 PR。

dengs-official commented 3 years ago

需要使用 pxTransform 来转换单位，convertToUnit 只能把数字加上固定单位，不能转换。有兴趣的话，可以提一个 PR。

pxTransform是将传入值根据设置比例转换，而这里需要根据设备尺寸动态设置原始px值，目前使用下方法，根据需要设置的高度反向转换后传入组件可正常适配各屏幕

rpxToPx(value) {
    const { windowWidth } = Taro.getSystemInfoSync();
    return value * (windowWidth / 750);
  },

由于对taro和小程序还不熟，不知道在其他小程序上是否有问题，暂时贴在这里

b2nil commented 3 years ago

我再看看

b2nil / taro-ui-vue3