Skip to content
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

[3.0.0-rc.6] 虚拟列表VirtualList滚动出现抖动 #6863

Closed
lin2006yuo opened this issue Jul 1, 2020 · 4 comments · Fixed by #7095
Closed

[3.0.0-rc.6] 虚拟列表VirtualList滚动出现抖动 #6863

lin2006yuo opened this issue Jul 1, 2020 · 4 comments · Fixed by #7095
Labels
A-components Area - H5 组件库相关 F-react Framework - React P-1 High, patch V-3 Version - 3.x
Milestone

Comments

@lin2006yuo
Copy link

问题描述
用手机预览,当虚拟列表row组件层级嵌套多的时候滚动出现严重抖动

复现步骤

  1. 复制官方demo
  2. 修改Row组件,如下
const Row = React.memo(({ index, style, data }) => {
  return (
    <View className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
      <View
        style={{
          display: "flex"
        }}
      >
        <Image
          style={{
            width: "100px",
            height: "100px"
          }}
          src='http://lorempixel.com/100/100/'
        />
        <View>
          <View>
            <View>{index}</View>
          </View>
        </View>
      </View>
    </View>
  )
})
  1. 打开小程序开发工具,手机扫码预览
  2. 快速向下滑,然后慢慢向上滚动,出现明显抖动。当层级嵌套多的时候抖动更加明显

系统信息
Taro CLI 3.0.0-rc.6 environment info:
System:
OS: macOS 10.14.6
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.7.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.10.0 - /usr/local/bin/npm
npmPackages:
@tarojs/components: 3.0.0-rc.6 => 3.0.0-rc.6
@tarojs/mini-runner: 3.0.0-rc.6 => 3.0.0-rc.6
@tarojs/react: 3.0.0-rc.6 => 3.0.0-rc.6
@tarojs/runtime: 3.0.0-rc.6 => 3.0.0-rc.6
@tarojs/taro: 3.0.0-rc.6 => 3.0.0-rc.6
@tarojs/webpack-runner: 3.0.0-rc.6 => 3.0.0-rc.6
babel-preset-taro: 3.0.0-rc.6 => 3.0.0-rc.6
eslint-config-taro: 3.0.0-rc.6 => 3.0.0-rc.6
react: ^16.10.0 => 16.13.1
npmGlobalPackages:
typescript: 3.7.3

补充信息
v3.0.0-rc.3不会,升级到v3.0.0-rc.6后出现

@yuche
Copy link
Contributor

yuche commented Jul 1, 2020

acdb92a
应该和这个有关

@IseeUDenis
Copy link

找到解决办法了吗

@qiqijojo
Copy link

qiqijojo commented Aug 4, 2020

这个抖动的解决了吗,我目前用上下滚动还是抖动的厉害。。。

@qiqijojo
Copy link

qiqijojo commented Aug 4, 2020

麻烦提示下怎么修复这个抖动的问题@Chen-jj

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-components Area - H5 组件库相关 F-react Framework - React P-1 High, patch V-3 Version - 3.x
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants