Feat/backtop 适配 JDRN、鸿蒙端 #2374
Feat/backtop 适配 JDRN、鸿蒙端 #2374
Conversation
Walkthrough这些更改涉及多个文件，对 backtop 功能进行了全面的修改和增强。主要变更包括导入新的钩子、添加新的属性和方法、重构 CSS 样式、更新配置文件以及调整文档以支持 React Native 和 HarmonyOS。总的来说，这些更改旨在提高代码性能、增加功能和改善用户体验。 Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Outside diff range and nitpick comments (2)
src/packages/backtop/backtop.tsx (2)
Line range hint
58-69: 对于scrollListener函数的实现，你已经使用了useCallback来包裹，这是一个好的实践，可以避免不必要的重渲染。不过，此函数依赖于threshold变量，但是没有包括scrollEl和SetScrollTop，这可能会导致在这些依赖变化时，回调不会更新。- }, [threshold]) + }, [threshold, scrollEl, SetScrollTop])
Line range hint
146-158: 对于可点击的元素，应该同时提供键盘事件处理函数，以支持键盘导航。这是为了增强应用的无障碍性（a11y）。建议添加相应的键盘事件处理逻辑。+ onKeyUp={(e) => { + if (e.key === 'Enter') { + goTop(e) + } + }}
packages/nutui-taro-demo-rn/src/nav/pages/backtop/index.config.ts
Outdated
Show resolved
Hide resolved
| @@ -52,6 +62,7 @@ import { BackTop } from '@nutui/nutui-react-taro' | |||
| | threshold | 页面垂直滚动多高后出现 | `number` | `200` | | |||
| | zIndex | 设置组件页面层级 | `number` | `900` | | |||
| | duration | 设置动画持续时间，为 0 时表示无动画 | `number` | `1000` | | |||
| | scrollRes | 被监听容器滚动时的回调参数，主要用于 rn、鸿蒙端 | `PageScrollObejct` | `-` | | |||
There was a problem hiding this comment.
修正拼写错误：PageScrollObejct
scrollRes 属性的类型拼写错误，应为 PageScrollObject。
- | scrollRes | 被监听容器滚动时的回调参数，主要用于 rn、鸿蒙端 | `PageScrollObejct` | `-` |
+ | scrollRes | 被监听容器滚动时的回调参数，主要用于 rn、鸿蒙端 | `PageScrollObject` | `-` |Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | scrollRes | 被监听容器滚动时的回调参数，主要用于 rn、鸿蒙端 | `PageScrollObejct` | `-` | | |
| | scrollRes | 被监听容器滚动时的回调参数，主要用于 rn、鸿蒙端 | `PageScrollObject` | `-` | |
| @@ -62,6 +72,7 @@ import { BackTop } from '@nutui/nutui-react'; | |||
| | threshold | 頁面垂直滾動多高後出現 | `number` | `200` | | |||
| | zIndex | 設置組件頁面層級 | `number` | `900` | | |||
| | duration | 設置動畫持續時間，為 0 時表示無動畫 | `number` | `1000` | | |||
| | scrollRes | 被監聽容器滾動時的回調參數，主要用於 RN、鴻蒙端 | `PageScrollObejct` | `-` | | |||
There was a problem hiding this comment.
修正拼写错误：PageScrollObejct
scrollRes 属性的类型拼写错误，应为 PageScrollObject。
- | scrollRes | 被監聽容器滾動時的回調參數，主要用於 RN、鴻蒙端 | `PageScrollObejct` | `-` |
+ | scrollRes | 被監聽容器滾動時的回調參數，主要用於 RN、鴻蒙端 | `PageScrollObject` | `-` |Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | scrollRes | 被監聽容器滾動時的回調參數，主要用於 RN、鴻蒙端 | `PageScrollObejct` | `-` | | |
| | scrollRes | 被監聽容器滾動時的回調參數，主要用於 RN、鴻蒙端 | `PageScrollObject` | `-` | |
| @@ -62,6 +72,7 @@ import { BackTop } from '@nutui/nutui-react'; | |||
| | threshold | How high to scroll the page vertically | `number` | `200` | | |||
| | zIndex | Set the component z-index | `number` | `900` | | |||
| | duration | Set animation duration | `number` | `1000` | | |||
| | scrollRes | Callback parameters of a ScrollView listener, mainly used for RN and HarmonyOS | `PageScrollObejct` | `-` | | |||
There was a problem hiding this comment.
修正拼写错误：PageScrollObejct
scrollRes 属性的类型拼写错误，应为 PageScrollObject。
- | scrollRes | Callback parameters of a ScrollView listener, mainly used for RN and HarmonyOS | `PageScrollObejct` | `-` |
+ | scrollRes | Callback parameters of a ScrollView listener, mainly used for RN and HarmonyOS | `PageScrollObject` | `-` |Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | scrollRes | Callback parameters of a ScrollView listener, mainly used for RN and HarmonyOS | `PageScrollObejct` | `-` | | |
| | scrollRes | Callback parameters of a ScrollView listener, mainly used for RN and HarmonyOS | `PageScrollObject` | `-` | |
| ### RN, HarmonyOS version usage | ||
|
|
||
| Due to the lack of support for fixed positioning, it needs to be used in conjunction with ScrollView. |
There was a problem hiding this comment.
简化措辞：in conjunction with
为了提高可读性，可以将 "in conjunction with" 简化为 "with"。
- Due to the lack of support for fixed positioning, it needs to be used in conjunction with ScrollView.
+ Due to the lack of support for fixed positioning, it needs to be used with ScrollView.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ### RN, HarmonyOS version usage | |
| Due to the lack of support for fixed positioning, it needs to be used in conjunction with ScrollView. | |
| ### RN, HarmonyOS version usage | |
| Due to the lack of support for fixed positioning, it needs to be used with ScrollView. |
Tools
LanguageTool
[style] ~57-~57: ‘in conjunction with’ might be wordy. Consider a shorter alternative.
Context: ... fixed positioning, it needs to be used in conjunction with ScrollView. :::demo <CodeBlock src='t...(EN_WORDINESS_PREMIUM_IN_CONJUNCTION_WITH)
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
BackTop组件引入scrollRes属性，以支持 RN 和 HarmonyOS 平台的滚动事件处理。scrollToTop功能，改进了返回顶部的体验。Demo5组件，实现可滚动视图和返回顶部功能。样式
.nut-backtop.show为.nut-backtop-rn，和.nut-backtop-show为.nut-backtop-show-active，改进视觉效果。border-radius和z-index属性，以提升样式一致性。文档
scrollRes属性及其用法。重构
useCallback和useMemo钩子来优化性能。