VTabs

2024-05-31 10:14

Tabs allow the user to switch between different views.

Vtabs

Property	Description	Type	Required
activeTab	Index of the currently active tab.	Number	Yes
tabs	tab data, including the tab `title`, unique list anchor value, as well as the badge type `badgeType` , which includes `dot` and `text`, and is not displayed if the `badgeType` is not set. Badge text `badgeText` takes effect when the `badgeType` is `text`.	Array	Yes
swipeable	An indicator of whether the tab can be swiped or not.	Boolean	Yes
tabBarActiveBgColor	tabBar background color is in active status.	String	No
tabBarInactiveBgColor	tabBar background color is in inactive status.	String	No
tabBarActiveTextColor	Active Tab text color of the tabBar.	String	No
tabBarInactiveTextColor	Inactive Tab text color of the tabBar.	String	No
tabBarlineColor	tabBar sideline color.	String	No
onTabClick	Callback when the tab is clicked.	(index: Number) => void	No
onChange	Trigger on vtab-content change.	(index: Number) => void	No

Vtab-content

View content

Property	Description	Type	Required
anchor	Unique anchor value of list.	String	Yes

Example

copy
{
  "defaultTitle": "AntUI Component Library",
  "usingComponents": {
    "vtabs": "mini-antui/es/vtabs/index",
    "vtab-content": "mini-antui/es/vtabs/vtab-content/index"
  }
}

copy
<view>
  <vtabs
    tabs="{{tabs}}"
    onTabClick="handleChange"
    onChange="onChange"
    activeTab="{{activeTab}}"
  >
    <block a:for="{{tabs}}">
      <vtab-content anchor="{{item.anchor}}">
        <view style="border: 1px solid #eee; height: 800px; box-sizing: border-box">
          <text>content of {{item.title}}</text>
        </view>
      </vtab-content>
    </block>
  </vtabs>
</view>

copy
Page({
  data: {
    activeTab: 2,
    tabs: [
      { title: 'Option two', anchor: 'a', badgeType: 'dot' },
      { title: 'Option', anchor: 'b', badgeType: 'text', badgeText: 'New' },
      { title: 'Option three', anchor: 'c' },
      { title: 'Option four', anchor: 'd' },
      { title: 'Option five', anchor: 'e' },
      { title: 'Option six', anchor: 'f' },
    ],
  },
  handleChange(index) {
    this.setData({
      activeTab: index,
    });
  },
  onChange(index) {
    console.log('onChange', index);
    this.setData({
      activeTab: index,
    });
  },
});