VTabs

2022-07-29 06:32

Tabs allow the user to switch between different views.

Vtabs

Attribute Name	Description	Type	Default	Mandatory
activeTab	Index of the currently active tab	Number		true
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		true
swipeable	Swipeable or not	Boolean		true
tabBarActiveBgColor	tabBar background color in active status	String		false
tabBarInactiveBgColor	tabBar background color in inactive status	String		false
tabBarActiveTextColor	Active Tab text color of the tabBar	String		false
tabBarInactiveTextColor	Inactive Tab text color of the tabBar	String		false
tabBarlineColor	tabBar sideline color	String		false
onTabClick	Callback when the tab is clicked	(index: Number) => void		false
onChange	Trigger on vtab-content change	(index: Number) => void		false

Vtab-content

View content

Attribute Name	Description	Type	Default	Mandatory
anchor	Unique anchor value of list	String		true

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,
    });
  },
});