FVS - Tab Component API

Example One: Get the index of the currently displayed tab page in the Tab1 component in an FVS template.

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

Example Two: Get the index of the currently displayed tab page in the Tab1 component in an FVS template and display a pop-up message.

var a=duchamp.getWidgetByName('Tab1').getShowIndex();
duchamp.Msg.alert({
      title: "Prompt" ,
      message:"The "+(a+1)+" tab page is displayed in the Tab currently, and the index is"+a
}
)

You can download the example template. Get the index of the current page of the Tab component.fvs

It is supported on mobile terminals.

Example One: Display the 2nd tab page (with an index of 1) of the Tab1 component in an FVS template.

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

Example Two: Enable automatic carousel for the Tab component by clicking the title component, with an interval of 3 seconds.

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

Example Three: Use a drop-down box widget to switch between tab pages.

var a = duchamp.getWidgetByName("index").getValue(); 
//Get the actual value of the drop-down box widget (in a string format).
duchamp.getWidgetByName("Tab1_Page1").showCardByIndex(+a); 
//Display the a-th tab page of a Tab component
//where the plus sign (+) is used to convert the returned value to a numeric format.

Change the displayed tab pages in the Tab1 component in an FVS template through a title component.

You can download the example template.Use JS to switch between Tab pages.fvs

It is supported on mobile terminals.

name: string

visibility: boolean

string: tab page name (string)

visibility: whether the tab page is displayed (boolean data type)

• true: show

• false: hide

Example: Hide the Tab1 tab page of the Tab1_Page1 component in an FVS template.

duchamp.getWidgetByName(
'Tab1_Page1'
).setTabVisible(
"Tab1"
,
false
);

Customize buttons to hide/show the Tab1 tab page of the Tab1_Page1 component.

You can download the example template.Use JS to show:hide Tab pages.fvs

It is supported on mobile terminals.