历史版本9 :FVS-Tab组件历史接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FineVis 的相关功能。


版本

报表服务器版本插件版本功能变动
11.0.9V1.9.1FVS-Tab组件 支持接口 getShowIndex()、showCardByIndex()
11.0.9V1.10.1支持接口 setTabVisible

目录:

getShowIndex编辑

方法getShowIndex()获取 Tab 组件正在展示的标签页的索引
     参数--
   返回值numberTab 组件当前标签页的定位索引数字，从 0 开始
     示例

示例1：在 FVS 模板中，获取「Tab1」组件当前正在展示的标签页索引

duchamp.getWidgetByName('Tab1').getShowIndex();

示例2：获取 FVS 模板中「Tab1」组件当前正在展示的标签页索引，并弹窗提示

var a=duchamp.getWidgetByName('Tab1').getShowIndex();
duchamp.Msg.alert({
      title: "提示" ,
      message:"当前Tab展示标签页为第 "+(a+1)+" 页，索引为 "+a
}
)


  应用示例

获取 FVS 模板中「Tab1」组件当前正在展示的标签页索引，并弹窗提示

点击可下载模板：获取Tab当前标签页索引.fvs

557C60B5-19C2-4512-B62B-06A581F87935.GIF

    移动端支持移动端

showCardByIndex编辑

方法showCardByIndex(index)设置 Tab 组件展示第 n 个标签页
     参数index: number展示标签页的索引，数字，从 0 开始
   返回值--
     示例

示例1：在 FVS 模板中，设置「Tab1」组件展示第 2 个标签页，索引为 1

duchamp.getWidgetByName('Tab1').showCardByIndex(1);

示例2：通过点击「标题组件」开启 Tab 组件自动轮播，轮播间隔为 3 s 

setInterval(function(){   
    var aa =duchamp.getWidgetByName("Tab1_页面1").getShowIndex(); 
    if(aa==2){ 
      duchamp.getWidgetByName('Tab1_页面1').showCardByIndex(0); 
    }
    else { 
      duchamp.getWidgetByName('Tab1_页面1').showCardByIndex(aa+1); 
    } 
},3000);

示例3：通过下拉框控件实现选择切换 Tab 标签页

详情请参见：FVS控件切换Tab页

var a = duchamp.getWidgetByName("index").getValue(); 
//获取下拉框控件的实际值（字符串格式）
duchamp.getWidgetByName("Tab1_页面1").showCardByIndex(+a); 
//设置Tab组件展示第 a 个标签页，这里需使用 + 号将获取到的值转换为数字格式


  应用示例

在 FVS 模板中，通过标题组件切换「Tab1」展示的标签页

点击下载模板：JS切换Tab标签页.fvs

112465FD-6702-40F7-A767-2C2B7F425450.GIF

    移动端支持移动端

setTabVisible编辑

方法setTabVisible(name, visibility)设置某个标签页显示/隐藏
     参数

name: string

visibility: boolean

string：Tab 标签页名称，字符串

visibility：Tab 标签页是否显示，布尔型

  • true：显示

  • false：隐藏

   返回值--
     示例

示例：在 FVS 模板中，将「Tab1_页面1」组件中名称为“Tab1”的标签页隐藏 

duchamp.getWidgetByName('Tab1_页面1').setTabVisible("Tab1",false);


  应用示例

自定义按钮实现隐藏/显示「Tab1_页面1」的 Tab1 ：

点击可下载模板：JS实现Tab页的隐藏或显示.fvs

C7EE9753-DF8F-4C5A-872C-FAB2B59BC1BE.GIF

    移动端支持移动端