Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VirtualWaterfall瀑布流组件中的unlimitedSize不生效 #14931

Closed
wukongyang opened this issue Dec 5, 2023 · 2 comments
Closed

VirtualWaterfall瀑布流组件中的unlimitedSize不生效 #14931

wukongyang opened this issue Dec 5, 2023 · 2 comments
Labels
A-components-advanced Area - 高阶组件 F-react Framework - React question Further information is requested T-weapp Target - 编译到微信小程序 V-3 Version - 3.x

Comments

@wukongyang
Copy link

相关平台

微信小程序

小程序基础库: 3.1.3
使用框架: React

复现步骤

<VirtualWaterfall
      height={Taro.pxTransform(height)} /* 列表的高度 */
      width='100%' /* 列表的宽度 */
      item={({ data, index }) => {
        return <Render index={index} item={data[index]} />;
      }} /* 列表单项组件,这里只能传入一个组件 */
      itemData={source} /* 渲染列表的数据 */
      itemCount={source.length} /* 渲染列表的长度 */
      unlimitedSize
      itemSize={100} /* 列表单项的高度  */
    />

每个item代码

const Row = React.memo(({ index, item }: any) => {
  return (
    <View
      style={{
        height: index % 2 === 0 ? 100 : 200,
        backgroundColor: randomColor(),
      }}
      id={index}
    >
      Row {index} : {item}
    </View>
  );
});

我实际的组件,每个item的高度都是不一定的,但是使用了unlimitedSize 后,每个item的高度还是被限制成了100px

期望结果

每个item的高度由自身决定,而不是itemSize来决定

实际结果

我实际的组件,每个item的高度都是不一定的,但是使用了unlimitedSize 后,每个item的高度还是被限制成了100px
image

环境信息

 Taro v3.6.17


  Taro CLI 3.6.17 environment info:
    System:
      OS: macOS 13.3
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
      npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.17 => 3.6.17 
      @tarojs/components: 3.6.17 => 3.6.17 
      @tarojs/helper: 3.6.17 => 3.6.17 
      @tarojs/plugin-framework-react: 3.6.17 => 3.6.17 
      @tarojs/plugin-mini-ci: ^3.6.18 => 3.6.18 
      @tarojs/plugin-platform-alipay: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-h5: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-jd: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-qq: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-swan: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-tt: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-weapp: 3.6.17 => 3.6.17 
      @tarojs/react: 3.6.17 => 3.6.17 
      @tarojs/rn-runner: 3.6.17 => 3.6.17 
      @tarojs/rn-supporter: 3.6.17 => 3.6.17 
      @tarojs/runtime: 3.6.17 => 3.6.17 
      @tarojs/runtime-rn: 3.6.17 => 3.6.17 
      @tarojs/shared: 3.6.17 => 3.6.17 
      @tarojs/taro: 3.6.17 => 3.6.17 
      @tarojs/taro-loader: 3.6.17 => 3.6.17 
      @tarojs/taro-rn: 3.6.17 => 3.6.17 
      @tarojs/webpack5-runner: 3.6.17 => 3.6.17 
      babel-preset-taro: 3.6.17 => 3.6.17 
      eslint-config-taro: 3.6.17 => 3.6.17 
      expo: ~47.0.3 => 47.0.14 
      react: ^18.1.0 => 18.2.0 
      react-native: ^0.70.1 => 0.70.13 
      taro-ui: ^3.1.1 => 3.1.1 
@wukongyang
Copy link
Author

期望实现如RN端这样的效果,item的高度由item组件决定
image

@ZakaryCode ZakaryCode added V-3 Version - 3.x T-weapp Target - 编译到微信小程序 A-components-advanced Area - 高阶组件 F-react Framework - React question Further information is requested labels Dec 5, 2023
@RunningLiLi
Copy link

image
应该将传入的id作为内部组件的id,而不是index,组件内部使用id获取真实dom的高度以达到目的(见源码)
image

@NervJS NervJS locked and limited conversation to collaborators Jan 31, 2024
@ZakaryCode ZakaryCode converted this issue into discussion #15197 Jan 31, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
A-components-advanced Area - 高阶组件 F-react Framework - React question Further information is requested T-weapp Target - 编译到微信小程序 V-3 Version - 3.x
Projects
Archived in project
Development

No branches or pull requests

3 participants