Skip to content
This repository has been archived by the owner on Dec 6, 2021. It is now read-only.

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

Open
dengs-official opened this issue Jun 20, 2021 · 3 comments

Comments

@dengs-official
Copy link

dengs-official commented Jun 20, 2021

问题描述

使用 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'),
@b2nil
Copy link
Owner

b2nil commented Jun 20, 2021

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

@dengs-official
Copy link
Author

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

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

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

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

@b2nil
Copy link
Owner

b2nil commented Jun 22, 2021

我再看看

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants