Skip to content
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

fix(overlay): tour position offset in tour.taro #2631

Merged
merged 8 commits into from
Oct 18, 2024
Merged

fix(overlay): tour position offset in tour.taro #2631

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c7256f0
fix(overlay): move in taro
Alex-huxiyang Oct 10, 2024
e138424
Merge branch 'next' into hxy/pickerOption/1009
Alex-huxiyang Oct 10, 2024
4d381fd
Merge branch 'next' into hxy/pickerOption/1009
Alex-huxiyang Oct 11, 2024
3e5809a
Merge branch 'next' into hxy/pickerOption/1009
Alex-huxiyang Oct 11, 2024
a7ec5a4
chore: save
Alex-huxiyang Oct 12, 2024
2a8507d
chore: save
Alex-huxiyang Oct 14, 2024
9640650
chore: save
Alex-huxiyang Oct 14, 2024
f9ccb7c
Merge branch 'next' into hxy/pickerOption/1009
Alex-huxiyang Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/packages/overlay/overlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@

.nut-overflow-hidden {
overflow: hidden !important;

.taro_page {
overflow: hidden !important;
}
Expand Down
8 changes: 5 additions & 3 deletions src/packages/tour/tour.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,14 @@ export const Tour: FunctionComponent<
const classes = classNames(classPrefix, className)

useEffect(() => {
if (visible) {
getRootPosition()
}
setActive(0)
setShowTour(visible)
setShowPopup(visible)
if (visible) {
setTimeout(() => {
getRootPosition()
})
}
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

使用 setTimeout 可能会影响性能和用户体验

将 getRootPosition() 包装在 setTimeout 中可以确保在计算根位置之前组件的可见性状态更新已完全处理。然而，这种方法也有一些潜在的问题：

  1. 引入了不必要的延迟，可能会影响用户体验。
  2. 没有指定超时时间，可能导致不一致的行为。
  3. 缺少错误处理机制。

建议考虑以下改进：

  1. 使用 requestAnimationFrame 代替 setTimeout，以确保在下一次重绘之前执行。
  2. 添加错误处理和超时机制。
  3. 考虑使用 React 的 useLayoutEffect 钩子，它会在所有 DOM 变化之后同步触发。

示例改进：

useEffect(() => {
  setActive(0)
  setShowTour(visible)
  setShowPopup(visible)

  if (visible) {
    const rafId = requestAnimationFrame(() => {
      try {
        getRootPosition()
      } catch (error) {
        console.error('Failed to get root position:', error)
      }
    })
    return () => cancelAnimationFrame(rafId)
  }
}, [visible])

这个方案可以在保持原有功能的同时，提高性能和可靠性。

}, [visible])

useEffect(() => {
Expand Down
Loading