Conversation
Walkthrough此次变更主要涉及样式和拖拽组件的调整。在样式部分，新增了对 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant D as Drag组件
participant G as getRectByTaro
participant W as Window信息
U->>D: 发起拖拽事件
D->>D: 检查 dragRef 是否存在
alt 当前为 web 平台
D->>W: 设置延时调用 getInfo
else
D->>G: 直接调用 getInfo 获取区域信息
end
G-->>D: 返回尺寸及位置数据
D->>D: 更新边界状态与样式
U->>D: 触摸结束动作
D->>D: 执行 touchEnd 逻辑
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (2)
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. 🪧 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 (
|
github-actions
bot
added
action:review
![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
🧹 Nitpick comments (3)
src/packages/drag/demos/taro/demo4.tsx (2)
14-14: 简化计算逻辑将
windowHeight - 501 - 57简化为windowHeight - 559，计算结果相同但代码更简洁。建议添加注释说明这个计算值的含义，以便将来维护时更容易理解。
31-36: 改进代码格式提高可读性将
boundary属性从单行格式改为多行对象结构，提高了代码的可读性和可维护性，同时保持了值的一致性。这是一个很好的实践，建议在项目中的其他地方也采用类似的格式。
src/packages/drag/drag.taro.tsx (1)
126-126: 移除未使用的参数从
touchEnd函数中移除了未使用的事件参数，符合代码简洁性原则。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/nutui-taro-demo/src/app.scss(1 hunks)src/packages/drag/demos/taro/demo2.tsx(0 hunks)src/packages/drag/demos/taro/demo3.tsx(0 hunks)src/packages/drag/demos/taro/demo4.tsx(1 hunks)src/packages/drag/drag.scss(1 hunks)src/packages/drag/drag.taro.tsx(4 hunks)
💤 Files with no reviewable changes (2)
- src/packages/drag/demos/taro/demo2.tsx
- src/packages/drag/demos/taro/demo3.tsx
🔇 Additional comments (6)
src/packages/drag/drag.scss (1)
13-13: 添加触摸行为控制以改善拖拽体验为
.nut-drag-inner类添加touch-action: none;属性可以防止浏览器默认的触摸行为（如滚动、缩放）干扰自定义拖拽逻辑，这对解决Taro中的滑动问题至关重要。packages/nutui-taro-demo/src/app.scss (1)
29-32: 确保滚动视图有足够的高度为
.demo.full类和内部的.jd-scroll-view添加最小高度限制，确保容器元素可以填满整个视口，这有助于解决滚动区域不足导致的滑动问题。计算值calc(100vh - 57px)考虑了顶部padding的空间，保证了布局的一致性。src/packages/drag/demos/taro/demo4.tsx (1)
21-22: 修改定位方式以优化交互体验将
position从'absolute'改为'fixed'并添加boxSizing: 'border-box'，有助于确保拖拽边界相对于视口定位，而不是相对于其定位父元素，并且确保边框不会影响元素的尺寸计算。这些变更对解决Taro中的滑动问题有积极作用。Also applies to: 27-27
src/packages/drag/drag.taro.tsx (3)
1-7: 优化导入结构支持跨平台兼容更新了导入语句，添加了Taro组件库中的
View组件和平台检测工具函数web，这有助于确保组件在不同平台上的一致行为。移除了不再使用的createSelectorQuery导入，减少了不必要的依赖。
64-86: 简化元素尺寸获取逻辑重构了
getInfo函数，使用getRectByTaro直接获取元素的尺寸和位置信息，简化了代码结构并提高了可读性。新的实现方式更加直观，通过解构赋值获取所需的维度，然后直接计算和设置边界状态。
143-156: 添加平台特定逻辑引入基于平台的条件执行，使用
web()函数判断当前平台并据此采取不同的初始化策略。在Web平台上增加了延时处理，非Web平台直接执行，这有助于解决不同平台下的初始化时机问题。
| <View style={style} className={`${classPrefix} ${className}`} ref={myDrag}> | ||
| <View | ||
| className={`${classPrefix}-inner`} | ||
| onTouchStart={(event) => touchStart(event)} | ||
| ref={dragRef} | ||
| catchMove | ||
| // @ts-ignore | ||
| onTouchStart={touchStart} | ||
| // @ts-ignore | ||
| onTouchMove={touchMove} | ||
| onTouchEnd={touchEnd} | ||
| // eslint-disable-next-line react/no-unknown-property | ||
| style={currstyle} | ||
| > | ||
| {children} | ||
| </div> | ||
| </div> | ||
| </View> | ||
| </View> |
There was a problem hiding this comment.
替换HTML元素为Taro组件
将传统的div元素替换为Taro的View组件，并添加catchMove属性以阻止触摸事件传播到父元素，这对于防止在拖拽操作过程中触发父容器的滚动行为至关重要，直接解决了PR中提到的Taro不能滑动的问题。
确保所有事件处理器都正确添加了// @ts-ignore注释，以避免TypeScript编译错误。当前只有onTouchStart和onTouchMove添加了注释，但onTouchEnd也可能需要。
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/packages/drag/demos/taro/demo4.tsx (1)
31-36: 提高代码可读性通过重新格式化
boundary属性的结构，每个属性值单独一行，提高了代码的可读性和可维护性。src/packages/drag/drag.taro.tsx (1)
143-156: 添加平台适配逻辑针对不同平台（Web 和原生）进行了差异化处理，为 Web 环境添加了延时执行，确保 DOM 完全渲染后再获取元素尺寸。
但需要注意，依赖项
[dragRef.current]可能会导致组件频繁重新渲染，建议改用useLayoutEffect或调整依赖项。-useEffect(() => { +useLayoutEffect(() => { if (dragRef.current) { if (web()) { timer.current = window.setTimeout(() => { getInfo() }, 300) } else { getInfo() } } return () => { clearTimeout(timer.current) } -}, [dragRef.current]) +}, [])
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/nutui-taro-demo/src/app.scss(1 hunks)src/packages/drag/demos/taro/demo2.tsx(0 hunks)src/packages/drag/demos/taro/demo3.tsx(0 hunks)src/packages/drag/demos/taro/demo4.tsx(1 hunks)src/packages/drag/drag.scss(1 hunks)src/packages/drag/drag.taro.tsx(4 hunks)
💤 Files with no reviewable changes (2)
- src/packages/drag/demos/taro/demo2.tsx
- src/packages/drag/demos/taro/demo3.tsx
🔇 Additional comments (7)
src/packages/drag/drag.scss (1)
13-13: 添加 touch-action 属性解决触摸滑动冲突通过为
.nut-drag-inner类添加touch-action: none;CSS 属性，成功阻止了浏览器默认的触摸行为（如滚动、缩放等），从而避免与自定义拖拽实现的冲突。这是解决 Taro 滑动问题的关键修改。packages/nutui-taro-demo/src/app.scss (1)
29-32: 优化滚动容器尺寸设置通过添加
min-height: 100vh和嵌套的.jd-scroll-view最小高度计算，确保了滚动区域有足够的高度。使用calc(100vh - 57px)考虑了顶部 57px 的间距，有效解决了在 Taro 环境中内容不能完整滚动的问题。src/packages/drag/demos/taro/demo4.tsx (2)
14-14: 简化边界计算逻辑将复杂的表达式
windowHeight - 501 - 57简化为等效的windowHeight - 559，使代码更加清晰易读。
21-22: 优化定位方式和盒模型将定位方式从
absolute更改为fixed并添加boxSizing: 'border-box'属性，可以确保元素相对于视口定位且边框计算更准确，这对于 Taro 环境下的拖拽边界计算至关重要。Also applies to: 27-27
src/packages/drag/drag.taro.tsx (3)
2-2: 优化导入结构正确引入了 Taro 的
View组件和平台检测工具，这是适配 Taro 环境的必要步骤。Also applies to: 6-7
126-126: 移除不必要的参数从
touchEnd函数中移除了不使用的事件参数，符合代码简洁性原则。
159-173: 使用 Taro 原生组件将 HTML
div元素替换为 Taro 的View组件，并添加了catchMove属性，这是解决 Taro 环境中滑动冲突的关键。catchMove可以阻止滑动事件冒泡，防止父容器捕获到子元素的滑动事件。
| const { | ||
| width, | ||
| height, | ||
| top: dragTop, | ||
| left: dragLeft, | ||
| } = await getRectByTaro(dragRef.current) | ||
|
|
||
| setBoundaryState({ | ||
| top: -dragTop + top, | ||
| left: -dragLeft + left, | ||
| bottom: windowHeight - dragTop - bottom - Math.ceil(height), | ||
| right: screenWidth - dragLeft - right - Math.ceil(width), | ||
| }) | ||
|
|
||
| middleLine.current = | ||
| screenWidth - rec.width - rec.left - (screenWidth - rec.width) / 2 | ||
| }) | ||
| .exec() | ||
| middleLine.current = | ||
| screenWidth - width - dragLeft - (screenWidth - width) / 2 | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
简化边界计算逻辑
重构了边界计算方法，使用 getRectByTaro 直接获取元素尺寸和位置信息，大大简化了代码结构，减少了嵌套回调，提高了代码可读性和性能。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3054 +/- ##
==========================================
Coverage 86.06% 86.06%
==========================================
Files 275 275
Lines 18234 18234
Branches 2751 2751
==========================================
Hits 15694 15694
Misses 2535 2535
Partials 5 5 ☔ View full report in Codecov by Sentry. |
3 participants
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
Style
Refactor