Skip to content

fix(taro-components-advanced): 修复VirtualWaterfall组件设置renderTop/Bottom后onScrollToLower/Upper无法触发的问题 #17697

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.

Sign up for GitHub

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

Jump to bottom
Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix(taro-components-advanced): 修复VirtualWaterfall组件设置renderTop/Bottom后onScrollToLower/Upper无法触发的问题 #17697

wants to merge 6 commits into from
+6 −7

Conversation

ttlive12
Copy link

@ttlive12 ttlive12 commented May 11, 2025 •
edited
Loading

这个 PR 做了什么?

修复了@taro-components-advanced包React版本的VirtualWaterfall组件中，当设置了renderBottom/renderTop属性时，onScrollToLower/onScrollToUpper事件无法被正确触发的问题。

这个 PR 是什么类型?

这个 PR 涉及以下平台:

  • 所有小程序
  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 字节跳动小程序
  • QQ 轻应用
  • 京东小程序
  • 快应用平台（QuickApp）
  • Web 平台（H5）
  • 移动端（React-Native）
  • 鸿蒙（harmony）

错误原因
VirtualWaterfall组件当用户提供renderBottom属性时，底部的检测节点会被用户的自定义内容替代，在getRenderExpandNodes函数中，该节点会被创建并设置id为${sid}-${direction}，但如果是用户自定义的组件，该组件会被Taro自动分配id，覆盖掉该id。
在函数boundaryDetectionHelper中，通过observer监听了该id对应的节点，这导致当使用renderBottom时，无法监听到onScrollToLower事件，onScrollToUpper同理。

错误验证
手动设置VirtualWaterfall组件的id，并设置renderBottom的根节点id为${id}-bottom。发现onScrollToLower事件能正常触发了。
但onScrollToLower（我的应用里是loadMore）只能触发一次，原因如下。
observe该id的boundaryDetectionHelper只会在初始化的时候设置一次，自定义的renderBottom会在触发一次数据更新后卸载，需要显示时重新挂载，不传renderBottom时使用的innerElement不会被卸载。

解决方案
效仿另一个组件virtual-list，如果设置了renderBottom/renderTop，函数getRenderExpandNodes中会同时返回默认的监听组件和自定义的组件，并保证顺序正确。

Summary by CodeRabbit

  • 优化
    • 改进了虚拟瀑布流组件的渲染结构，提升了渲染一致性和方向适配能力。

@coderabbitai coderabbitai
Copy link

coderabbitai bot commented May 11, 2025 •
edited
Loading

Walkthrough

本次变更修改了 getRenderExpandNodes 函数的返回值逻辑，使其始终返回一个包含两个 React 元素的数组，并根据 direction 参数决定顺序。无论 renderExpand 是否存在，props.style 都会应用隐藏样式。未更改任何导出的实体声明或签名。

Changes

文件/路径 变更摘要
packages/taro-components-advanced/src/components/virtual-waterfall/react/wrapper.ts 修改 getRenderExpandNodes，始终返回包含两个元素的数组，并调整顺序和样式逻辑。

Assessment against linked issues

Objective Addressed Explanation
修复设置 renderTop/renderBottom 属性时，onScrollToLower/onScrollToUpper 事件无法触发（#17696） ✅

Poem

兔子敲键盘，代码轻轻改，
瀑布流组件，顺序两头排。
事件终可触，滚动不再哑，
React 数组舞，样式藏精彩。
代码如流水，进步乐开怀！ 🐇✨

Tip

⚡️ Faster reviews with caching
  • CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.

✨ Finishing Touches
  • 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot]
coderabbitai bot reviewed May 11, 2025
View reviewed changes
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
packages/taro-components-advanced/src/components/virtual-waterfall/react/wrapper.ts (1)

31-35: 改进了渲染节点的实现方式，修复了事件触发问题

这个修改解决了 PR 中描述的核心问题。通过始终返回一个包含两个元素的数组（自定义渲染组件和边界检测元素），确保了即使用户提供了自定义的 renderTop/Bottom，边界检测元素仍然存在且 ID 正确，从而使 onScrollToLower/Upper 事件能够正常触发。

这种实现方式与 virtual-list 组件类似，是一个经过验证的解决方案。

不过有一个小的代码风格建议：

- const expands = [renderExpand && React.createElement(renderExpand), React.createElement(innerElement!, props)]
+ const expands = [
+   renderExpand ? React.createElement(renderExpand) : null, 
+   React.createElement(innerElement!, props)
+ ]

使用三元运算符可能会使代码更易读，并明确表示当 renderExpand 不存在时返回 null。虽然在 React 渲染中，false、null 和 undefined 都会被忽略，但使用 null 是更常见的做法。

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 66d0340 and 6d8f95a.

📒 Files selected for processing (1)
  • packages/taro-components-advanced/src/components/virtual-waterfall/react/wrapper.ts (1 hunks)
🔇 Additional comments (1)
packages/taro-components-advanced/src/components/virtual-waterfall/react/wrapper.ts (1)

24-30: 样式属性现在无条件应用

在修改前，style 属性可能根据 renderExpand 是否存在而有条件地应用。现在无论 renderExpand 是否存在，都会应用这个隐藏样式。这确保了边界检测元素始终保持隐藏状态。

@ttlive12 ttlive12 changed the title fix: 修复VirtualWaterfall组件设置renderTop/Bottom后onScrollToLower/Upper无法触发的问题 fix(taro-components-advanced): 修复VirtualWaterfall组件设置renderTop/Bottom后onScrollToLower/Upper无法触发的问题 May 11, 2025
This was referenced May 17, 2025
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@ttlive12