相关平台

微信小程序

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

复现步骤

import Taro from '@tarojs/taro'
import React, { useRef, useState } from 'react'
import VirtualList from '@tarojs/components/virtual-list'
import { Button, View } from '@tarojs/components'

type Props = {
  id: string
  index: number
  data: any
}

function buildData(offset = 0) {
  return Array(100)
    .fill(0)
    .map((_, i) => i   offset)
}

const { windowHeight } = Taro.getSystemInfoSync()
const itemHeight = 100

const Row = React.memo((props: Props) => {
  const { id, index, data } = props

  return (
    <View
      id={id}
      style={{ height: '100%', backgroundColor: index % 2 ? 'silver' : 'green' }}
    >
      Row { index } : { data[index] }
    </View>
  )
})

export default function Index() {
  const ref: any = useRef(null)
  const [ data ] = useState(buildData())
  const dataLen = data.length

  const onTap1 = () => {
    if (ref.current) {
      ref.current.scrollTo()
    }
  }

  const onTap2 = () => {
    if (ref.current) {
      ref.current.scrollToItem(5)
    }
  }

  const onScroll = (e) => {
    console.log(e.scrollDirection)
  }

  return (
    <View>
      <VirtualList
        ref={ref}
        height={windowHeight} /* 列表的高度 */
        width='100%' /* 列表的宽度 */
        item={Row} /* 列表单项组件，这里只能传入一个组件 */
        itemData={data} /* 渲染列表的数据 */
        itemCount={dataLen} /* 渲染列表的长度 */
        itemSize={itemHeight} /* 列表单项的高度  */
        useIsScrolling
        layout='vertical'
        unlimitedSize
        position='absolute'
        onScroll={onScroll}
      />
      <Button onClick={onTap1} style={{ position: 'fixed', bottom: '120px', right: '20px', width: '100px' }}>顶部</Button>
      <Button onClick={onTap2} style={{ position: 'fixed', bottom: '50px', right: '20px', width: '100px' }}>第5行</Button>
    </View>
  )
}

期望结果

Virtual List不抖动。
还原3.5.12的版本

实际结果

新版本抖动

环境信息

Taro CLI 3.6.0 environment info:
    System:
      OS: macOS 13.2
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 14.19.3 - ~/.nvm/versions/node/v14.19.3/bin/node
      Yarn: 1.22.19 - ~/.yarn/bin/yarn
      npm: 6.14.17 - ~/.nvm/versions/node/v14.19.3/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.0 => 3.6.0
      @tarojs/components: 3.6.0 => 3.6.0
      @tarojs/helper: 3.6.0 => 3.6.0
      @tarojs/plugin-framework-react: 3.6.0 => 3.6.0
      @tarojs/plugin-platform-alipay: 3.6.0 => 3.6.0
      @tarojs/plugin-platform-jd: 3.6.0 => 3.6.0
      @tarojs/plugin-platform-qq: 3.6.0 => 3.6.0
      @tarojs/plugin-platform-swan: 3.6.0 => 3.6.0
      @tarojs/plugin-platform-tt: 3.6.0 => 3.6.0
      @tarojs/plugin-platform-weapp: 3.6.0 => 3.6.0
      @tarojs/react: 3.6.0 => 3.6.0
      @tarojs/router: 3.6.0 => 3.6.0
      @tarojs/runtime: 3.6.0 => 3.6.0
      @tarojs/shared: 3.6.0 => 3.6.0
      @tarojs/taro: 3.6.0 => 3.6.0
      @tarojs/taro-h5: 3.6.0 => 3.6.0
      @tarojs/webpack5-runner: 3.6.0 => 3.6.0
      babel-preset-taro: 3.6.0 => 3.6.0
      eslint-config-taro: 3.6.0 => 3.6.0
      react: ^18.0.0 => 18.2.0

补充信息

问题是由于这个fix导致的： ae8764e

Screenshot:
https://user-images.githubusercontent.com/124277517/216508737-6b51b60a-4763-457b-9c4b-701bf5b4f908.MP4