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.

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

[FEATURE] 可以参考借鉴vben admin 体验很好,界面很漂亮。 #360

Open
lujihong opened this issue Oct 15, 2024 · 16 comments
Open
Assignees

Comments

@lujihong
Copy link

https://github.com/vbenjs/vue-vben-admin

细节做得很好,界面也很美观,体验也很好。在macos上左右滑动鼠标也不会触发浏览器前进后退,横向滚动体验很好。

我试过好多后台都有横向滚动触发浏览器前进后退等问题,vben admin做得是目前我发现最好的体验的。

@kanyxmo
Copy link
Member

kanyxmo commented Oct 16, 2024

我没mac,你录个视频,看看是怎么触发浏览器前进后退的

@lujihong
Copy link
Author

10.16.mp4

视频中我在标签栏左右滑动以及在其他任意区域左右滑动时在vben中表现是没有问题的,但mineadmin中存在问题。
尤其在表格超过横向可视区域时需要左右滚动等场景容易误触浏览器的前进后退行为。

@kanyxmo
Copy link
Member

kanyxmo commented Oct 16, 2024

我发现vben再windows下无法用鼠标滚动

@lujihong
Copy link
Author

我刚试了,用苹果的妙控鼠标是可以的。

@kanyxmo
Copy link
Member

kanyxmo commented Oct 16, 2024

QQ20241016-145451.mp4

@kanyxmo
Copy link
Member

kanyxmo commented Oct 16, 2024

vben.mp4

@kanyxmo
Copy link
Member

kanyxmo commented Oct 16, 2024

他这个win下,就用不了

@lujihong
Copy link
Author

window下你是按住shift键然后鼠标滚动再滚动的吗?

@lujihong
Copy link
Author

普通鼠标在win系统下按住shift键,再上下滚动鼠标滚轮相当于左右滚动,我测试是可以滚动的。
妙控鼠标的话是可以直接左右滑动进行滚动。

@kanyxmo
Copy link
Member

kanyxmo commented Oct 16, 2024

好,我研究一下

@hooray
Copy link

hooray commented Nov 13, 2024

我试过好多后台都有横向滚动触发浏览器前进后退等问题

这不是bug,是浏览器的feature,即便是vben也不例外,在mac上横向滑动就是会触发浏览器前进后退。

除非在全局样式里增加一句:

html {
  overscroll-behavior: none;
}

视频中我在标签栏左右滑动以及在其他任意区域左右滑动时在vben中表现是没有问题的,但mineadmin中存在问题

这个是也不是bug,是框架设计如此,优化了鼠标使用体验。实现方案是阻止了默认滚动行为,并在滚动鼠标时,模拟成横向滚动。意味着只要鼠标指针停留在标签栏区域滚动时,自动会变成横向滚动效果。

但由于 onWheel 无法区分是触摸板滑动还是鼠标滚动,所以触摸板也变成了上下滑动才能实现横向的滚动。

@lujihong
Copy link
Author

lujihong commented Nov 13, 2024 via email

@hooray
Copy link

hooray commented Nov 13, 2024

mac上我测试了不会触发浏览器前进和后退

会不会是因为当前网页没有可后退,或者可前进的地址?你可以看我录制的视频,首次打开是不会触发后退的,当随便跳转一个路由后,这时是不会触发前进的,但在这2个页面之间,是会触发前进和后退的

Microsoft.Edge.mp4

@lujihong
Copy link
Author

lujihong commented Nov 13, 2024 via email

@lujihong
Copy link
Author

我试过好多后台都有横向滚动触发浏览器前进后退等问题

这不是bug,是浏览器的feature,即便是vben也不例外,在mac上横向滑动就是会触发浏览器前进后退。

除非在全局样式里增加一句:

html {
  overscroll-behavior: none;
}

视频中我在标签栏左右滑动以及在其他任意区域左右滑动时在vben中表现是没有问题的,但mineadmin中存在问题

这个是也不是bug,是框架设计如此,优化了鼠标使用体验。实现方案是阻止了默认滚动行为,并在滚动鼠标时,模拟成横向滚动。意味着只要鼠标指针停留在标签栏区域滚动时,自动会变成横向滚动效果。

但由于 onWheel 无法区分是触摸板滑动还是鼠标滚动,所以触摸板也变成了上下滑动才能实现横向的滚动。

我看到vben因为修复鼠标手势滑动的bug而去除了这个特性(https://github.com/vbenjs/vue-vben-admin/pull/4845),也就是你提到的用的这个overscroll-behavior: none方法实现的阻止鼠标左右滑动触发的浏览器前进后退特性。

@lujihong
Copy link
Author

这篇文章很好的说明了这种情况:https://juejin.cn/post/7129772440346951693

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants