NervJS / taro

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.54k stars 4.79k forks source link

VirtualWaterfall组件并没有正确渲染,并且没有抛出错误 #14285

Closed abramyangCN closed 1 year ago

abramyangCN commented 1 year ago

相关平台

微信小程序

小程序基础库: 3.0.0/2.33.0 使用框架: React

复现步骤

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

期望结果

希望得到Waterfall的渲染

实际结果

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

image

环境信息

🐠 $ 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代码实测发现如下问题:

  1. onScrollToUpper,onScrollToLower不执行,小程序正常
  2. onScroll回调中的{scrollDirection, scrollOffset, onScroll},滚动方向在onScroll中返回的,而不是文档中说的scrollDirection;scrollOffset返回的是单次滑动偏移,不是整体偏移,所以文档中的无限上拉加载无法实现
  3. 由于虚拟列表本身需要设置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
  1. onScrollToUpper,onScrollToLower不执行,小程序正常

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

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

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

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

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

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

fanlvwen commented 1 year ago
  1. onScrollToUpper,onScrollToLower不执行,小程序正常

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

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

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

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

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

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

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

image