最新历史版本 :JS实现点击按钮切换Sheet页 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1.需求描述编辑

有的时候我们想实现上一页、下一页或跳转到指定 sheet 页。效果如下

222

2.操作步骤编辑

选中按钮>添加按钮点击事件

222

具体 JavaScript 代码如下:

首页 JavaScript 代码:

//跳转到首页(因为下标是从0开始) fr-sheetbutton-container为sheet页的集合
$(".fr-sheetbutton-container").eq(0).trigger("click");

上一页 JavaScript 代码

//fr-sheetbutton-container为sheet页的集合,获取集合长度
var len = $(".fr-sheetbutton-container").length;
//获取当前选中sheet所在下标位置
var index = $(".fr-sheetbutton-container").index($(".fr-sheetbutton-container-active"));
//如果当前下标为0 表示为首页。
if(index > 0) {
//不是首页跳转到上一页
    $(".fr-sheetbutton-container").eq(index - 1).trigger("click");
}else{
//当前为首页跳转到最后一页(因为下标从0开始,所以要长度减1)
$(".fr-sheetbutton-container").eq(len - 1).trigger("click");
}

下一页 JavaScript 代码:

//fr-sheetbutton-container为sheet页的集合,获取集合长度
var len = $(".fr-sheetbutton-container").length;
//获取当前选中sheet所在下标(下标从0开始)
var index = $(".fr-sheetbutton-container").index($(".fr-sheetbutton-container-active"));
if(index < len) {
//如果当前下标index比len长度小1 表示已经为最后一页。
    if(index == (len - 1)) {
       //当前为最后一页。跳转到首页
        $(".fr-sheetbutton-container").eq(0).trigger("click");
    } else {
       // 不为最后一页。跳转到下一页
        $(".fr-sheetbutton-container").eq(index + 1).trigger("click");
    }
}

尾页 JavaScript 代码:

//fr-sheetbutton-container为sheet页的集合,获取集合长度
var len = $(".fr-sheetbutton-container").length;
//跳转到尾页(因为下标是从0开始) 所以得长度减1
$(".fr-sheetbutton-container").eq(len-1).trigger("click");