JS实现点击按钮切换sheet页

1.需求描述

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

2.操作步骤

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

具体js如下

首页js

//跳转到首页(因为下标是从0开始) fr-sheetbutton-container为sheet页的集合

$(".fr-sheetbutton-container").eq(0).trigger("click");

上一页js

//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");

}

下一页js

//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");

    }

}

尾页js

//fr-sheetbutton-container为sheet页的集合,获取集合长度

var len = $(".fr-sheetbutton-container").length;

//跳转到尾页(因为下标是从0开始) 所以得长度减1

$(".fr-sheetbutton-container").eq(len-1).trigger("click");