taro-ui-vue3 icon indicating copy to clipboard operation
taro-ui-vue3 copied to clipboard

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

Open dengs-official opened this issue 3 years ago • 3 comments

问题描述

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

版本信息

1.0.0-alpha.21

涉及的平台

weapp

错误信息

// error message here image

代码

小程序用以下方式修复后可以设置正确当前页和子项的高度,在内联样式中将高度转换为了对应的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'),

dengs-official avatar Jun 20 '21 15:06 dengs-official

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

b2nil avatar Jun 20 '21 22:06 b2nil

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

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

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

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

dengs-official avatar Jun 21 '21 14:06 dengs-official

我再看看

b2nil avatar Jun 22 '21 08:06 b2nil