Tabs 标签栏

标签栏常用于页面内部不同业务区域的切换控制

提示

items标签栏数组，默认获取配置的keyField: 'id',displayField: 'text'

[
  { id: 'product', text: '宝贝' },
  { id: 'evaluation', text: '评价' },
  { id: 'detail', text: '详情' }
]

设置keyField: 'key',displayField: 'value'，那么需要传递的items数据如下：

[
  { key: 'product', value: '宝贝' },
  { key: 'evaluation', value: '评价' },
  { key: 'detail', value: '详情' }
]

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

示例

基本用法

items 标签栏数组

v-model 绑定激活的标签栏（数组中的一项）

keyField: 'id', 选项id字段，默认为id

displayField: 'text', 选项显示字段，默认为text

disabledField: 'disabled', 禁用字段，默认为disabled

### 固定sliderBar宽度
可通过`slider-bar-width`设置标签栏底部滑动条宽度
```vue
<template>
  <pi-tabs
    v-model="sliderBarWidth.currentItem"
    :items="sliderBarWidth.tabItems"
    slider-bar-width="60"
  />
</template>

<script>
export default {
	data(){
  	return {
    	sliderBarWidth: {
        currentItem: { id: 'product' },
        tabItems: [
          { id: 'product', text: '宝贝' },
          { id: 'evaluation', text: '评价' },
          { id: 'detail', text: '详情' },
          { id: 'discover', text: '发现好物' },
          { id: 'recommend', text: '推荐我的好宝贝' },
          { id: 'share', text: '分享' }
        ]
      }
    }
  }
}
</script>

显示滚动槽

可通过show-slider-bar-guide设置是否显示滚动槽

<template>
  <pi-tabs
    v-model="showSliderBarGuide.currentItem"
    :items="showSliderBarGuide.tabItems"
    slider-bar-width="60"
    active-color="blue"
    show-slider-bar-guide
  />
</template>

<script>
export default {
	data(){
  	return {
    	showSliderBarGuide: {
        currentItem: { id: 'detail' },
        tabItems: [
          { id: 'product', text: '宝贝' },
          { id: 'evaluation', text: '评价' },
          { id: 'detail', text: '详情' },
          { id: 'discover', text: '发现好物' },
          { id: 'recommend', text: '推荐我的好宝贝' },
          { id: 'share', text: '分享' }
        ]
      }
    }
  }
}
</script>

标签均分宽度

可通过stretch将标签均匀分布在屏幕的宽度范围内

<template>
  <pi-tabs
    v-model="stretch.currentItem"
    :items="stretch.tabItems"
    stretch
    active-color="green"
  />
</template>
<script>
export default {
	data(){
  	return {
    	stretch: {
        currentItem: { id: 'c' },
        tabItems: [
          { id: 'a', text: 'A' },
          { id: 'b', text: 'B' },
          { id: 'c', text: 'C' },
          { id: 'd', text: 'D' }
        ]
      }
    }
  }
}
</script>

自定义样式

item-style设置选项样式 active-text-color设置文字激活颜色 active-item-style设置激活选项样式

<template>
  <pi-tabs
    v-model="itemStyle.currentItem"
    :items="itemStyle.tabItems"
    :item-style="{ color: '#333333', fontWeight: 600 }"
    stretch
    :show-slider-bar="false"
    active-text-color="#ffffff"
    :active-item-style="{
      backgroundColor: '#ff508a',
      borderRadius: '12rpx'
    }"
    @change="handleChangeItem"
  />
</template>
<script>
export default {
	data(){
  	return {
    	itemStyle: {
        currentItem: { id: 'c' },
        tabItems: [
          { id: 'a', text: 'A' },
          { id: 'b', text: 'B' },
          { id: 'c', text: 'C' },
          { id: 'd', text: 'D' },
          { id: 'e', text: 'E' }
        ]
      },
    }
  },
  methods: {
    handleChangeItem(val) {
      console.log('切换到' + val.text)
    }
  }
}
</script>

自定义激活标签

<template>
  <pi-tabs
    v-model="activeItemStyle.currentItem"
    :items="activeItemStyle.tabItems"
    slider-bar-width="60"
    active-text-color="#222222"
    active-color="#ff508a"
    :show-slider-bar-guide="false"
    :active-item-style="{
      fontSize: '48rpx',
      fontWeight: '600',
      color: '#ff508a'
    }"
    :item-style="{
      fontSize: '32rpx',
      color: '#666666'
    }"
  />
</template>
<script>
export default {
	data(){
  	return {
    	activeItemStyle: {
        currentItem: { id: 'c' },
        tabItems: [
          { id: 'a', text: 'A' },
          { id: 'b', text: 'B' },
          { id: 'c', text: 'C' },
          { id: 'd', text: 'D' },
          { id: 'e', text: 'E' }
        ]
      },
    }
  }
}
</script>

自定义slot

注意

由于微信小程序平台兼容性，已知问题如下：

1. uniapp工程manifest.json必须在mp-weixin下声明"scopedSlotsCompiler": "legacy"，否则无法使用自定义slot
2. slot中无法绑定 @tap 事件
3. slot中只能使用 item index active 等data，无法获取父组件的数据

<template>
  <pi-tabs
    v-model="customSlot.currentItem"
    :items="customSlot.tabItems"
    show-item-split-line
  >
    <view slot="item" slot-scope="{ item }">
      <view class="pi-align-center">
        <view>{{ item.text }}</view>
        <pi-badge color="#5a7dff" :content="item.num" class="pi-mg-left-6" />
      </view>
    </view>
  </pi-tabs>
</template>
<script>
export default {
	data(){
  	return {
    	customSlot: {
        currentItem: { id: '5' },
        tabItems: [
          { id: '1', text: '全部', num: 0 },
          { id: '2', text: '家电', num: 100 },
          { id: '5', text: '奢侈品', num: 30 },
          { id: '3', text: '家具', num: 0 },
          { id: '4', text: '服装', num: 0 },
          { id: '6', text: '其他', num: 0 }
        ]
      }
    }
  }
}
</script>

API

Props

Basic Options

名称	描述	类型	必选	默认值
value	初始值	—	false	-
customStyle	自定义样式，对象形式	Object	false	{}
customClass	自定义样式类，字符串形式	String	false	''
items	选项列表，默认	Array	false	[]
keyField	选项id字段	String	false	'id'
displayField	选项显示字段	String	false	'text'
disabledField	选项禁用字段	String	false	'disabled'
itemPadding	选项两边的padding，单位rpx	String/Number	false	30
stretch	标签是否自动撑开	Boolean	false	false
duration	动画执行时间（毫秒）	String/Number	false	300
activeColor	激活颜色（不设置，默认主题色）	String	false	''
activeTextColor	文字激活颜色（不设置，默认主题色）	String	false	''
showItemSplitLine	是否显示每项分割线	Boolean	false	false
showSliderBar	是否显示底部的滑块	Boolean	false	true
showSliderBarGuide	是否显示底部滑块导轨	Boolean	false	false
sliderBarWidth	底部的滑块的宽度，单位rpx（如果不设置，默认按照当前item文字的宽度去适配）	String/Number	false	''
sliderBarHeight	底部的滑块的高度，单位rpx	String/Number	false	4
sliderBarRadius	底部的滑块的圆角，单位rpx	String/Number	false	4
height	导航栏的高度，单位rpx	String/Number	false	80
itemStyle	选项样式	Object	false	{}
sliderBarStyle	底部滑块样式	Object	false	{}
activeItemStyle	激活选项样式	Object	false	{}

#

Events

方法名称	说明	参数
beforeChange	tabs切换前事件	当前激活item
change	tabs切换	当前激活item