给在下方显示的Sheet标签页也加上滚轮滚动功能

收藏

本帖最后由 Richard.Ma 于 2023-6-5 15:27 编辑

SpreadJS表单标签的位置默认是在下方，通过tabStripPosition选项来改变表单标签相对于工作簿的位置。

当表单标签在工作簿左边或者右边时，用户可以通过鼠标滚动表单标签。但是目前表单标签在上方或下方时尚不支持鼠标滚轮滚动标签

https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/workbook/tab-strip/purejs

对于一些用户来说，希望SpreadJS和WPS一样，在表单标签默认显示在下方时，也能通过鼠标滚轮滚动。本篇教程介绍如何通过代码来实现次需求

首先，标签以及其导航按钮这部分区域实际是一个canvas，在spreadjs中id为“ss_tabStrip”,如果是在desinger中的话，id是“null_tabStrip”
image.png626967467.png

所有我们需要做的就是给这个canvas绑定上mousewheel事件，在其中通过代码控制标签页滚动

document.getElementById("ss_tabStrip").onmousewheel = function (args) {
//判断tab标签页位置是在上方或者下方，避免影响原有的左右两侧的滚动逻辑
if (workbook.options.tabStripPosition == GC.Spread.Sheets.TabStripPosition.bottom||workbook.options.tabStripPosition == GC.Spread.Sheets.TabStripPosition.top) {
//判断滚动方向
if (args.deltaY > 0 && workbook.startSheetIndex() < workbook.getSheetCount() - 1) {
console.log("右移");
//调用startSheetIndex改变第一个标签的index
workbook.startSheetIndex(workbook.startSheetIndex() + 1);
} else if (args.deltaY < 0 && workbook.startSheetIndex() > 0) {
console.log("左移");
workbook.startSheetIndex(workbook.startSheetIndex() - 1);
}
}
}

复制代码

最终效果

		自动登录	找回密码
密码			立即注册

给在下方显示的Sheet标签页也加上滚轮滚动功能

0 个回复

浏览过的版块

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人