VirtualWaterfall组件并没有正确渲染，并且没有抛出错误

abramyangCN commented 1 year ago

复现步骤

已经用@taro/cli 已更新至3.6.11 用taro init 选择默认模版新建空白项目将文档中的代码贴进index page中，显示空白页面将VirtualWaterfall替换成VirtualList，VirtualList工作正常

期望结果

希望得到Waterfall的渲染

实际结果

空白页面，左右两个列表中间没有view结构，Console未抛出任何异常

环境信息

🐠 $ taro info                                                                                                                                                         🔋 80% 🛜 FBN-5G
👽 Taro v3.6.11

  Taro CLI 3.6.11 environment info:
    System:
      OS: macOS 13.4.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
      npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.11 => 3.6.11 
      @tarojs/components: 3.6.11 => 3.6.11 
      @tarojs/helper: 3.6.11 => 3.6.11 
      @tarojs/plugin-framework-react: 3.6.11 => 3.6.11 
      @tarojs/plugin-platform-alipay: 3.6.11 => 3.6.11 
      @tarojs/plugin-platform-h5: 3.6.11 => 3.6.11 
      @tarojs/plugin-platform-jd: 3.6.11 => 3.6.11 
      @tarojs/plugin-platform-qq: 3.6.11 => 3.6.11 
      @tarojs/plugin-platform-swan: 3.6.11 => 3.6.11 
      @tarojs/plugin-platform-tt: 3.6.11 => 3.6.11 
      @tarojs/plugin-platform-weapp: 3.6.11 => 3.6.11 
      @tarojs/react: 3.6.11 => 3.6.11 
      @tarojs/runtime: 3.6.11 => 3.6.11 
      @tarojs/shared: 3.6.11 => 3.6.11 
      @tarojs/taro: 3.6.11 => 3.6.11 
      @tarojs/taro-loader: 3.6.11 => 3.6.11 
      @tarojs/webpack5-runner: 3.6.11 => 3.6.11 
      babel-preset-taro: 3.6.11 => 3.6.11 
      eslint-config-taro: 3.6.11 => 3.6.11 
      react: ^18.0.0 => 18.2.0

ZakaryCode commented 1 year ago

是否传入高度，或给上层组件设置高度

abramyangCN commented 1 year ago

import { VirtualWaterfall } from "@tarojs/components-advanced";
import React, { Component } from "react";
import { View } from "@tarojs/components";

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

const Row = React.memo(({ id, index, data }) => {
  return (
    <View id={id} className={index % 2 ? "ListItemOdd" : "ListItemEven"}>
      Row {index}
    </View>
  );
});

export default class Index extends Component {
  state = {
    data: buildData(0),
  };

  render() {
    const { data } = this.state;
    const dataLen = data.length;
    return (
      <VirtualWaterfall
        height={800} // 列表的高度
        width="100%" // 列表的宽度
        item={Row} // 列表单项组件，这里只能传入一个组件
        itemData={data} // 渲染列表的数据
        itemCount={dataLen} // 渲染列表的长度
        itemSize={100} // 列表单项的高度
      />
    );
  }
}

设置了高度了

是否传入高度，或给上层组件设置高度

ZakaryCode commented 1 year ago

normal 模式确实存在该问题，可以将 itemSize 改成函数避开该问题，下一个版本修复

Youngwellcool commented 1 year ago

这组件的文档在哪呢？

abramyangCN commented 1 year ago

@ZakaryCode 感谢指引，目前它渲染正常了，但是item传入的component组件有Image且向上滚动的时候有非常严重的抖动和重新排列，这如何解决。

@Youngwellcool 多列表渲染 VirtualWaterfall

Youngwellcool commented 1 year ago

您好，你的邮件我已经收到了。谢谢！

ZakaryCode commented 1 year ago

但是item传入的component组件有Image且向上滚动的时候有非常严重的抖动和重新排列，这如何解决

未能复现对应问题，请提交对应示例用于定位问题。列表抖动可以确定对应平台与 enhanced 模式是否开启，另外列表抖动同样可能由于滚动过快导致，可以限制单页大小规避问题；另外重新排列可能在 unlimitedSize 模式下出现，这可能由于 itemSize 与实际高度差距过大导致，这只能从使用组件侧自行优化

fanlvwen commented 1 year ago

但是item传入的component组件有Image且向上滚动的时候有非常严重的抖动和重新排列，这如何解决

未能复现对应问题，请提交对应示例用于定位问题。列表抖动可以确定对应平台与 enhanced 模式是否开启，另外列表抖动同样可能由于滚动过快导致，可以限制单页大小规避问题；另外重新排列可能在 unlimitedSize 模式下出现，这可能由于 itemSize 与实际高度差距过大导致，这只能从使用组件侧自行优化

@ZakaryCode 大佬，VirtualList小程序上表现很棒，rn下的是不是还没有完善？ v3.6.11使用此demo代码实测发现如下问题：

onScrollToUpper，onScrollToLower不执行，小程序正常
onScroll回调中的{scrollDirection, scrollOffset, onScroll}，滚动方向在onScroll中返回的，而不是文档中说的scrollDirection；scrollOffset返回的是单次滑动偏移，不是整体偏移，所以文档中的无限上拉加载无法实现
由于虚拟列表本身需要设置disableScroll:true，所以页面无法下拉刷新，这块有什么思路吗

ZakaryCode commented 1 year ago

1. onScrollToUpper，onScrollToLower不执行，小程序正常

这两个事件用于优化小程序 ScrollView 触顶触底事件缺少问题，并没有针对于 RN 端优化（由于 RN 端不支持 createIntersectionObserver 方法）

2. onScroll回调中的{scrollDirection, scrollOffset, onScroll}，滚动方向在onScroll中返回的，而不是文档中说的scrollDirection；scrollOffset返回的是单次滑动偏移，不是整体偏移，所以文档中的无限上拉加载无法实现

未能复现到该问题，scrollOffset 取值为 Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight)) 并非如问题中所述

3. 由于虚拟列表本身需要设置disableScroll:true，所以页面无法下拉刷新，这块有什么思路吗

ScrollView 部分场景下确实与页面可能存在冲突导致需要二选一，下拉刷新也可以在 ScrollView 中自行实现，这可以根据实际需求自行取舍。

fanlvwen commented 1 year ago

onScrollToUpper，onScrollToLower不执行，小程序正常

这两个事件用于优化小程序 ScrollView 触顶触底事件缺少问题，并没有针对于 RN 端优化（由于 RN 端不支持 createIntersectionObserver 方法）

onScroll回调中的{scrollDirection, scrollOffset, onScroll}，滚动方向在onScroll中返回的，而不是文档中说的scrollDirection；scrollOffset返回的是单次滑动偏移，不是整体偏移，所以文档中的无限上拉加载无法实现

未能复现到该问题，scrollOffset 取值为 Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight)) 并非如问题中所述

由于虚拟列表本身需要设置disableScroll:true，所以页面无法下拉刷新，这块有什么思路吗

ScrollView 部分场景下确实与页面可能存在冲突导致需要二选一，下拉刷新也可以在 ScrollView 中自行实现，这可以根据实际需求自行取舍。

问题2也是在RN环境下出现的，小程序没问题

fanlvwen commented 1 year ago

onScrollToUpper，onScrollToLower不执行，小程序正常

这两个事件用于优化小程序 ScrollView 触顶触底事件缺少问题，并没有针对于 RN 端优化（由于 RN 端不支持 createIntersectionObserver 方法）

onScroll回调中的{scrollDirection, scrollOffset, onScroll}，滚动方向在onScroll中返回的，而不是文档中说的scrollDirection；scrollOffset返回的是单次滑动偏移，不是整体偏移，所以文档中的无限上拉加载无法实现

未能复现到该问题，scrollOffset 取值为 Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight)) 并非如问题中所述

由于虚拟列表本身需要设置disableScroll:true，所以页面无法下拉刷新，这块有什么思路吗

ScrollView 部分场景下确实与页面可能存在冲突导致需要二选一，下拉刷新也可以在 ScrollView 中自行实现，这可以根据实际需求自行取舍。

问题2也是在RN环境下出现的，小程序没问题

@ZakaryCode 实测rn下返回的是单次滑动偏移哈，大佬cc，就是[文档中的源码](https://taro-docs.jd.com/docs/next/virtual-list)

NervJS / taro