Tabs 标签 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

用于让用户在不同的视图中进行切换。

规则

标签数量，一般 2-4 个；其中，标签中的文案需要精简，一般 2-4 个字。
在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突，eg：详情页中 Tabs。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {Tabs, TabsPane} from '@21cnfe/vui'  
Vue.component('Tabs', Tabs)  
Vue.component('TabsPane', TabsPane)

代码演示

Tabs 标签 tabs

基本用法 tabs 与 tabsPane 相结合实现选项卡基本功能，在tabsPane匿名插槽中嵌入选项卡内容

<tabs>
  <tabsPane name="tab1">
    <div>tabs内容1</div>
  </tabsPane>
  <tabsPane name="tab2">
    <div>tabs内容2</div>
  </tabsPane>
</tabs>

标签样式组件提供了标签栏文字、背景、下划线、边框的属性

<template>
  <tabs
    :tabBarDefaultBorder="false"
    :tabBarTextStyle="tabBarTextStyle"
    :tabBarActiveTextStyle="tabBarActiveTextStyle"
    :activeTabBarStyle="activeTabBarStyle"
    :tabBarBackgroundColor="tabBarBackgroundColor"
  >
    <tabsPane name="tab1">
      <div>tabs内容1</div>
    </tabsPane>
    <tabsPane name="tab2">
      <div>tabs内容2</div>
    </tabsPane>
  </tabs>
</template>
<script>
  export default {
      data () {
        return {
          tabBarTextStyle: {
            'font-size': '14px'
          },
          tabBarActiveTextStyle: {
            'font-size': '16px',
            color: 'red'
          },
          activeTabBarStyle: {
            bottom: '3px',
            width: '40px',
            background: 'red'
          },
          tabBarBackgroundColor: '#F9F9F9'
        }
      }
    }
</script>

页面展示选项数当标签栏选项卡过多时，可使用 page 属性设置一屏展示数量

<tabs :page="4">
</tabs>

TabsPane 结合Badge微标

//文字微标
<tabsPane name="tab" badge="3">
  <div>tabs内容1</div>
</tabsPane>
//小红点
<tabsPane name="tab" dot>
  <div>tabs内容2</div>
</tabsPane>

无动画 tabs 标签上设置 animated 属性为 false 时关闭切换选项卡动画

<tabs :animated="false">
</tabs>

标签栏位置 tabBarPosition 位置属性设置标签栏位置

//水平方向可设置标签栏上下位置
<tabs tabBarPosition="top">
  //标签栏位置： 上
</tabs>
<tabs tabBarPosition="bottom">
  //标签栏位置： 下
</tabs>

API

属性	说明	类型	默认值
`activeTab`	当前激活Tab索引	Number	`0`
`animated`	是否使用动画	Boolean	`true`
`page`	Tab分页尺寸	Number	`5`
`tabBarPosition`	Tabs选项标签位置,可选值`top` \| `bottom`	String	`top`
`tabBarTextStyle`	Tabs选项未选中时标签文字样式	Object	`--`
`tabBarActiveTextStyle`	Tabs选项选中时标签文字样式	Object	`--`
`activeTabBarStyle`	Tabs标签下划线样式	Object	`--`
`tabBarDefaultBorder`	Tabs自带边框	Boolean	`true`
`tabBarBackgroundColor`	Tabs标签栏背景色	String	`--`

Event

事件名称	说明	回调参数
`onChange`	tab 发成改变时的回调	{data: item, index: index}
`onTabClick`	tab 被点击的回调	{data: item, index: index}

Slot（TabsPane）

插槽名称	说明
匿名插槽	TabsPane中嵌入标签页内容

1. Tabs 标签 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Tabs 标签 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

API

Event

Slot（TabsPane）

Tabs 标签 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用