fix: 添加 passive 事件监听器以提高页面滚动性能 #688
Conversation
- 将 touchstart 和 touchmove 事件监听器设置为 passive，提升页面滚动时的响应速度 - 修复了控制台中出现的非 passive 事件监听器警告
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改主要集中在 Changes
Possibly related PRs
Suggested reviewers
Poem
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 (
|
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue(1 hunks)
🔇 Additional comments (1)
src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue (1)
11-12: 建议：验证滚动行为
由于该组件实现了自定义的索引栏滚动行为，在修改事件监听器修饰符时需要特别注意：
- 如果移除
.prevent，可能会导致页面产生意外的滚动行为 - 如果保留
.passive，可能会影响组件的滚动控制功能
建议在以下场景下测试组件的滚动行为：
- 快速滑动索引栏
- 在内容区域滚动
- 同时触发多个触摸事件
✅ Verification successful
事件修饰符使用正确，无需修改
根据代码分析，当前的事件修饰符组合是合理的：
.prevent修饰符的使用是必要的，因为组件需要完全控制滚动行为.passive和.prevent的组合在 uni-app 环境中是有效的，不会产生冲突- 其他类似的可拖动组件（如 wd-floating-panel、wd-fab）也采用了类似的事件处理方式
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索相关的测试用例
rg -t vue "wd-index-bar.*test"
Length of output: 60
Script:
#!/bin/bash
# Search for test files related to index-bar
fd -e spec.js -e test.js "index-bar"
# Search for the component implementation to understand scroll behavior
rg -g "*.vue" "handleTouch(Start|Move)" -A 5
# Look for similar scroll behavior implementations in other components
ast-grep --pattern 'touchmove.stop.passive.prevent'
Length of output: 6548
| @touchstart.stop.passive.prevent="handleTouchStart" | ||
| @touchmove.stop.passive.prevent="handleTouchMove" |
There was a problem hiding this comment.
注意：.passive 和 .prevent 修饰符的冲突问题
当前的事件监听器同时使用了 .passive 和 .prevent 修饰符，这两个修饰符是互相矛盾的：
.passive告诉浏览器事件处理程序不会调用preventDefault().prevent会调用preventDefault()- 这种组合会导致
.passive失去提升性能的作用
建议根据实际需求选择其中之一：
如果需要阻止默认行为：
-@touchstart.stop.passive.prevent="handleTouchStart"
-@touchmove.stop.passive.prevent="handleTouchMove"
+@touchstart.stop.prevent="handleTouchStart"
+@touchmove.stop.prevent="handleTouchMove"如果想提升滚动性能：
-@touchstart.stop.passive.prevent="handleTouchStart"
-@touchmove.stop.passive.prevent="handleTouchMove"
+@touchstart.stop.passive="handleTouchStart"
+@touchmove.stop.passive="handleTouchMove"📝 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.
| @touchstart.stop.passive.prevent="handleTouchStart" | |
| @touchmove.stop.passive.prevent="handleTouchMove" | |
| @touchstart.stop.prevent="handleTouchStart" | |
| @touchmove.stop.prevent="handleTouchMove" | |
| ``` | |
| Option 2 (if improving scroll performance is needed): | |
| ```suggestion | |
| @touchstart.stop.passive="handleTouchStart" | |
| @touchmove.stop.passive="handleTouchMove" |
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit