## 组件名称

Tabs

## 示例图

[此处应该是图片]

## 可配置属性与控制的功能

#### Accordion属性说明：
|属性名 | 类型 | 必填 | 默认值 |说明 |
|---|---|---|---|
|className|String|否|-|自定义class|
|type|String|否|flex|tabs类型 flex: flex布局 auto: 流式布局|
|mode|String|否|auto|tabs布局模式: fixed: 固定定位tabbar auto: 流式布局|
|tabs|Array|是|-|tabbar数据|
|activeTab|Number|否|0|首次默认切换指定tab(仅初始化，不支持修改)|
|navBarWidth|String|否|100%|自定义tabbar宽度|
|navItemClassName|String|否|-|自定义navbar class|
|selectNavItemClassName|String|否|-|自定义选中态navbar class|
|slideBarClassName|String|否|-|自定义滑块class|

#### Accordion组件的回调

|事件名|含义|参数|
|--|--|--|
|onChange|切换tab回调函数|(key: string): void|

## 注意

由于存在tabs原生组件，所以使用自定义组件命名时加上前缀，如：`custom-tabs`

## 使用示例
json:

    {
        "navigationBarTitleText": "标题",
        "navigationStyle": "custom",
        "usingComponents": {
            "custom-tabs": "yourpath/components/Tabs/src/index"
        }
    }

swan:

    <view>
        <custom-tabs
            tabs="{{tabs}}"
            class-name="test-class"
            type="flex"
            mode="auto"
            active-tab="{{0}}"
            nav-bar-width="100%"
            nav-item-class-name="test-item-class"
            select-nav-item-class-name="test-item-select-class"
            slide-bar-class-name="test-slide-class"
            bindonChange="onChange"
         >
        </custom-tabs>
    </view>
js:
```javascript { .theme-peacock }
/* eslint-disable babel/new-cap */
Page({
/* eslint-enable babel/new-cap */
    data: {
       tabs: [
           {title: '第一选项', key: 'test-0'},
           {title: '第二选项', key: 'test-1'},
           {title: '第三选项', key: 'test-2'},
           {title: '第四选项', key: 'test-3'},
           {title: '第五选项', key: 'test-4'}
       ]
    },
    onChange: () => {
        console.log(1);
    }
})
```