长列表渲染抖动 滚动空白

[qiqijojo]

相关平台

微信小程序

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

复现步骤

<VirtualList
                                            /* 列表的高度 */
                                            height={500}
                                            /* 列表的宽度 */
                                            width='100%'
                                            /* 渲染列表�的数据 */
                                            itemData={item.items}
                                            /*  渲染列表的长度 */
                                            itemCount={item.items.length}
                                            /* 列表单项的高度  */
                                            itemSize={192}
                                        >
                                            {DishesItem}
                                        </VirtualList>

跟文档书写一致

期望结果

列表上下平滑滚动、底部不会留空白

实际结果

列表抖动严重；
列表数据较多时底部大面积空白。

环境信息

👽 Taro v3.0.7


  Taro CLI 3.0.7 environment info:
    System:
      OS: macOS 10.14.6
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 13.13.0 - ~/.nvm/versions/node/v13.13.0/bin/node
      npm: 6.14.4 - ~/.nvm/versions/node/v13.13.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.7 => 3.0.7
      @tarojs/components: 3.0.7 => 3.0.7
      @tarojs/mini-runner: 3.0.7 => 3.0.7
      @tarojs/react: 3.0.7 => 3.0.7
      @tarojs/runtime: 3.0.7 => 3.0.7
      @tarojs/taro: 3.0.7 => 3.0.7
      @tarojs/webpack-runner: 3.0.7 => 3.0.7
      babel-preset-taro: 3.0.7 => 3.0.7
      eslint-config-taro: 3.0.7 => 3.0.7
      eslint-plugin-taro: 3.0.7 => 3.0.7
      react: ^16.13.1 => 16.13.1

[qiqijojo]

@Chen-jj

[Chen-jj]

给个 demo 看看咯

[qiqijojo]

**tsx:**
import React, { useState } from 'react';
import { useLocalStore, useObserver } from 'mobx-react-lite';
import { View, ScrollView } from '@tarojs/components';
import VirtualList from '@tarojs/components/virtual-list';
import classnames from 'classnames/bind';
import { useStore } from '@/store';
import styles from './list.module.scss';
import createStore from './index.store';

const cls = classnames.bind(styles);

const OrderList = () => {    
    const store = useLocalStore(createStore);

    const Row = ({ data, index }) => {
        return <View className={cls('dish-img')}>第{index}个</View>;
    };
    return useObserver(() => (
        <View
            className={cls('order-list-wrapper')}
        >
            {store.orderList.items && store.orderList.items.length !== 0 ? (
                <VirtualList
                    /* 列表的高度 */
                    height={500}
                    /* 列表的宽度 */
                    width='100%'
                    /* 渲染列表�的数据 */
                    itemData={store.orderList.items}
                    /*  渲染列表的长度 */
                    itemCount={store.orderList.items.length}
                    /* 列表单项的高度  */
                    itemSize={200}
                >
                    {Row}
                </VirtualList>
            ) : null}
        </View>
    ));
};
export default OrderList;

**scss:**
.order-list-wrapper {
    width: 100%;
    background: #050505;

.dish-img {
        // background-size: cover;
        // background-repeat: no-repeat;
        // background-position: center center;
        width: 100%;
        height: 400rpx;
        border: 1rpx solid #FEE6C3;
        color: #FEE6C3;
    }
}

我提取了这个简单的demo，麻烦看下哈@Chen-jj

[qiqijojo]

@Chen-jj hi，怎么样了呢？

[Chen-jj]

提供一下完整可运行的 demo 吧

[qiqijojo]

可运行demo在这里：demo
主要是这一部分，上下滚动会出现抖动和空白的情况。麻烦看一下哈！@Chen-jj

[qiqijojo]

@Chen-jj 大佬记得看下哈！

[xinggangling]

学京东小程序，自己做个scrollview控制滚动速度

[Chen-jj]

@qiqijojo Item 需要接收并设置 style

const Row = ({ data, index, style }) => {
    return <View className={cls('dish-img')} style={style}>第{index}个</View>;
};

[ihwf]

你好, 这个问题解决了吗? 为啥在taro3.1上传了style一样还是会抖动?