fix(Tabs): 合并2.x版本 #3043
fix(Tabs): 合并2.x版本 #3043
Conversation
Walkthrough该 PR 对 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant T as Tabs组件
participant F as 滚动函数
U->>T: 触发滚动操作
T->>F: 调用 scrollIntoView (计算目标位置)
F->>F: 调用 scrollDirection (根据方向直接更新滚动位置)
F-->>T: 滚动位置已更新
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
xiaoyatong
requested review from
irisSong and
oasis-cloud
and removed request for
irisSong
github-actions
bot
added
the
action:review
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3043 +/- ##
==========================================
Coverage 86.05% 86.05%
==========================================
Files 281 281
Lines 18255 18255
Branches 2749 2749
==========================================
Hits 15709 15709
Misses 2541 2541
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/tabs/tabs.taro.tsx (1)
302-302: 将空字符串替换为 undefined，优化条件属性将条件不满足时的值从空字符串改为 undefined 是更符合 React 最佳实践的做法。当属性为 undefined 时，React 不会将其渲染到 DOM 中，而空字符串会被当作有效值处理。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/tabs/tabs.taro.tsx(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (3)
src/packages/tabs/tabs.taro.tsx (3)
163-165: 简化滚动方向逻辑，提高代码可读性改动移除了之前使用的动画逻辑，改为直接设置滚动位置，这是一个好的简化。注释也清晰地解释了为什么不需要手动使用 raf 来控制 scrollLeft。
188-189: 删除了对负 to 值的检查，允许滚动到所有计算位置之前的版本可能会忽略某些滚动位置（特别是负值），导致第一个项目无法滚动到可视区域。移除这个检查后，组件现在会尝试滚动到所有计算出的位置，解决了PR中提到的第一个项目不可滚动的问题。
234-234:✅ Verification successful
添加 enhanced 属性优化滚动性能
添加 enhanced 属性可以增强 ScrollView 组件的滚动性能，这与 PR 目标中提到的"增强对滚动条可见性的控制"相符。根据微信小程序文档，enhanced 模式提供更强大的性能和滚动控制能力。
🌐 Web query:
微信小程序 ScrollView enhanced 属性有什么作用💡 Result:
微信小程序中
scroll-view组件的enhanced属性主要用于启用增强滚动特性，提供更丰富的交互控制和性能优化。以下是其主要作用：核心功能
启用ScrollViewContext控制
开启后可通过ScrollViewContext对象动态操作滚动视图，实现精准的滚动位置控制、边界检测等高级功能[1][5][9]。支持扩展属性生效
作为以下增强属性的前置条件，这些特性仅在enhanced=true时生效：
paging-enabled：分页滑动效果（类似轮播图）[1][2]show-scrollbar：控制滚动条显隐[1][3]bounces：iOS边界弹性效果开关[2][3]fast-deceleration：滑动减速速率控制[3][7]事件增强
开启后支持更精细的滚动事件监听：
<scroll-view enhanced binddragstart="onDragStart" binddragging="onDragging" binddragend="onDragEnd">
binddragstart：滑动开始时触发，返回scrollTop/Left[1][3]binddragging：滑动中持续触发，返回实时位置[1][7]binddragend：滑动结束触发，额外返回velocity滑动速度[1][3]性能优化
- 通过
enable-passive属性配合使用可提升滚动性能[1]- iOS下通过
scroll-anchoring属性防止内容抖动（需同时开启）[5]使用注意事项
版本要求
需基础库版本≥2.12.0[5][9]，建议在app.json中设置"enableEnhancedScroll": true全局配置。嵌套限制
增强模式下避免嵌套过多滚动容器，可能导致手势冲突[4][10]。平台差异
部分特性如bounces仅在iOS生效，安卓需通过CSS实现类似效果[3][5]。典型配置示例：
<scroll-view enhanced scroll-y show-scrollbar="{{false}}" bounces="{{false}}" style="height: 300rpx;" binddragend="handleScrollEnd" > <!-- 滚动内容 --> </scroll-view>Citations:
- 1: https://juejin.cn/post/7391693209372819497
- 2: https://juejin.cn/post/7281266407491551286
- 3: https://www.cnblogs.com/lichong951/p/17710570.html
- 4: https://blog.csdn.net/weixin_43877368/article/details/137047645
- 5: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
- 6: https://developers.weixin.qq.com/community/develop/doc/000c0cb99282a84c95daf23ce5b000
- 7: https://docs.taro.zone/docs/3.x/components/viewContainer/scroll-view/
- 8: https://www.cnblogs.com/zsbb/p/17091330.html
- 9: https://developers.weixin.qq.com/community/develop/doc/00046c95be8828dca59f2fd3956c00
- 10: https://blog.csdn.net/weixin_45899614/article/details/138837197
修改确认：ScrollView 组件增强滚动性能
在文件
src/packages/tabs/tabs.taro.tsx的第 234 行添加enhanced属性后，该组件将启用微信小程序的增强滚动特性。启用后，ScrollView 可通过 ScrollViewContext 实现精准的滚动位置控制，同时支持分页滑动、滚动条控制、边界弹性和快速减速等扩展功能。这一改动符合 PR 中对“增强滚动条可见性控制”的优化目标，并能有效提升滚动性能。请确保全局配置（如app.json中的"enableEnhancedScroll": true）满足该属性要求。
2 participants
1、修复多个元素出现时，第一条数据无法滚动到可视区的问题
2、滚动条显隐控制的增强处理
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
Summary by CodeRabbit