Skip to content

feat(layout): support mouse wheel horizontal scroll on global tab - #933

Merged
honghuangdc merged 1 commit into
soybeanjs:mainfrom
lvlvkeeper:feat/tab-wheel-scroll
Jul 10, 2026
Merged

feat(layout): support mouse wheel horizontal scroll on global tab#933
honghuangdc merged 1 commit into
soybeanjs:mainfrom
lvlvkeeper:feat/tab-wheel-scroll

Conversation

@lvlvkeeper

Copy link
Copy Markdown
Contributor

背景

当标签页数量较多时,现有标签栏只能通过点住某个标签后拖动才能查看其他标签,操作不便。用户期望在鼠标进入标签栏区域时,可以直接用鼠标滚轮让标签左右滑动,同时保留现有所有功能(拖拽、中键关闭、右键菜单等)。

改动内容

src/layouts/modules/global-tab/index.vue 中新增滚轮横向滑动支持:

  1. 新增 handleWheel 函数:监听 wheel 事件,将滚轮的纵向 deltaY 转换为 BetterScroll 实例的横向 scrollBy 偏移
    • 向下滚动 → 标签向左滑动(露出右侧标签)
    • 向上滚动 → 标签向右滑动(露出左侧标签)
  2. 提取力度倍率常量 WHEEL_SPEED_RATIO,便于后续按手感调整(< 1 减慢,> 1 加快)
  3. 在外层 bsWrapper 容器上绑定 @wheel="handleWheel"

兼容性保障

  • 当标签未溢出(bs.maxScrollX === 0,横向无滚动空间)时不拦截事件,避免影响页面正常纵向滚动
  • 不修改任何现有功能(拖拽、中键关闭、右键菜单、点击切换、激活标签自动滚动到可视区等全部保留)

验证

  • pnpm typecheck 通过(0 error)
  • pnpm lint 通过(0 warnings, 0 errors)
  • 本地实测:鼠标进入标签栏滚轮可左右滑动,标签少时不拦截页面滚动

截图 / 录屏

@Azir-11 Azir-11 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

感谢pr,初步来看有点小问题需要修改:

  1. commit 需要通过 pnpm commit 提交符合规范的 msg 格式
  2. msg 正文以及注释需要遵循项目规范使用英文
  3. 对 "WHEEL_SPEED_RATIO" 这类的魔法常量可以放到全局的常量文件里面

@lvlvkeeper
lvlvkeeper force-pushed the feat/tab-wheel-scroll branch from fd7f907 to 6d38ea4 Compare July 9, 2026 00:56
@lvlvkeeper
lvlvkeeper force-pushed the feat/tab-wheel-scroll branch 2 times, most recently from 1e5fe79 to 40f93c5 Compare July 9, 2026 01:23
@lvlvkeeper

Copy link
Copy Markdown
Contributor Author

好的,已按照要求修改并重新提交PR
40f93c5

@lvlvkeeper lvlvkeeper changed the title feat(layout): 标签栏支持鼠标滚轮横向滑动 feat(layout): support mouse wheel horizontal scroll on global tab Jul 9, 2026
@Azir-11

Azir-11 commented Jul 10, 2026

Copy link
Copy Markdown
Member

3. WHEEL_SPEED_RATIO

对于WHEEL_SPEED_RATIO 其实我的意思是放到constants文件夹里面的,如果说你想把它做到主题配置里面,那么就需要在“主题配置”这个 drawer 里面增加配置的支持。其实我是比较偏向于不做配置或者写到constants里面的

@lvlvkeeper
lvlvkeeper force-pushed the feat/tab-wheel-scroll branch from 40f93c5 to 1e5fe79 Compare July 10, 2026 09:04
@honghuangdc
honghuangdc merged commit 3d3613f into soybeanjs:main Jul 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants