taro-ui-vue3
taro-ui-vue3 copied to clipboard
VirtualScroll :itemHeight 单位固定成为了px,无法适配小程序
问题描述
使用 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'),
需要使用 pxTransform 来转换单位,convertToUnit 只能把数字加上固定单位,不能转换。 有兴趣的话,可以提一个 PR。
需要使用 pxTransform 来转换单位,convertToUnit 只能把数字加上固定单位,不能转换。 有兴趣的话,可以提一个 PR。
pxTransform是将传入值根据设置比例转换,而这里需要根据设备尺寸动态设置原始px值,目前使用下方法,根据需要设置的高度反向转换后传入组件可正常适配各屏幕
rpxToPx(value) {
const { windowWidth } = Taro.getSystemInfoSync();
return value * (windowWidth / 750);
},
由于对taro和小程序还不熟,不知道在其他小程序上是否有问题,暂时贴在这里
我再看看