HIPS-UNI-UI

# Tabs 标签页

# 使用指南

import Tabs from '@hips/uni-ui/lib/tabs';
import Tab from '@hips/uni-ui/lib/tab';

export default {
  components: {
    'hips-tabs': Tabs,
    'hips-tab': Tab,
  },
};
1
2
3
4
5
6
7
8
9

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-tabs v-model="active">
  <hips-tab v-for="(item, index) in 3" :key="index" :title="`title${item}`" />
</hips-tabs>
1
2
3
export default {
  data() {
    return {
      active: 0,
    };
  },
};
1
2
3
4
5
6
7

# 禁用

<hips-tabs v-model="active">
  <hips-tab v-for="(item, index) in 2" :key="index" :title="`title${item}`" />
  <hips-tab title="禁用" disabled />
</hips-tabs>
1
2
3
4

# 设定阈值滑动

<hips-tabs v-model="active" :scroll-threshold="3">
  <hips-tab v-for="(item, index) in 7" :key="index" :title="`title${item}`" />
</hips-tabs>
1
2
3

注意

设定 scroll-threshold 参数，当 tab 数量超过此值时才会可以左右滑动

# 卡片样式

<hips-tabs v-model="active" :height="30" type="card">
  <hips-tab v-for="(item, index) in 4" :key="index" :title="`title${item}`" />
</hips-tabs>
1
2
3

# 切换选中时图标/文字




 
 





 
 




<hips-tabs v-model="active">
  <hips-tab
    title="title1"
    active-title="active1"
    icon="email"
    active-icon="email-filled"
  />
  <hips-tab
    title="title2"
    active-title="active2"
    :image="iconPersonNormal"
    :active-image="iconPersonActive"
  />
  <hips-tab title="title3" active-title="active3" />
</hips-tabs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import iconPersonNormal from './assets/icon_person_normal@2x.png';
import iconPersonActive from './assets/icon_person_press@2x.png';

export default {
  data() {
    return {
      iconPersonNormal,
      iconPersonActive,
    };
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 右侧徽章

<hips-tabs v-model="active">
  <hips-tab title="title0" badge="12" />
  <hips-tab title="title1" dot />
</hips-tabs>
1
2
3
4

# 使用插槽显示内容

<hips-tabs v-model="active">
  <hips-tab v-for="(item, index) in 4" :key="index" :title="`title${item}`">
    content {{ item }}
  </hips-tab>
</hips-tabs>
1
2
3
4
5

# 内容支持滑动切换 tab

 







<hips-tabs v-model="active" swipeable>
  <hips-tab v-for="(item, index) in 4" :key="index" :title="`title${item}`">
    <view style="height: 100px;">
      content {{ item }}
    </view>
  </hips-tab>
</hips-tabs>
1
2
3
4
5
6
7

# API

# Tabs

参数 说明 类型 可选值 默认值
value v-model 绑定 Number - 0
type 显示类型 String [line, card] line
scroll-threshold 默认产生滚动的阈值 Number - 4
animated 是否开启内容切换时动画 Boolean - true
color icon 和标题默认文字颜色 String - #9B9B9B
active-color icon 和标题选中文字颜色 String - #4D4D4D
line-width 底部条宽度 Number - -
line-height 底部条高度 Number - 2
line-color 底部条颜色 String - #1F8CEB
swipeable 是否内容滑动来切换 tab Boolean - false
duration 动画持续时间 Number - 300
height 组件高度 Number - 50

# Tab

参数 说明 类型 可选值 默认值
title 默认标题 String - -
active-title 选中时标题，不设定时取 title 值 String - -
icon 左侧默认图标 String - -
active-icon 选中时左侧图标，不设定时取 icon 值 String - -
image 左侧默认图片 String - -
active-title 选中时左侧图片，不设定时取 image 值 String - -
badge 右侧徽章数 Number - -
max-badge 右侧徽章上限 Number - 99
dot 右侧徽章显示为点 Boolean - false
disabled 禁用 Boolean - false

# Slots

# Tabs

名称 说明
- 用于放置 hips-tab 组件

# Tab

名称 说明
- 用于放置内容

# Events

# Tabs

名称 说明 参数
change tab 切换时触发 选中的 tab index 值
disabled tab 为禁用状态下点击时触发 -

# 样式变量

变量名 说明 默认值
tabs-bg-color tabs 容器背景颜色 white
tab-default-font-size tab 默认文字大小 28rpx
tab-active-font-size tab 选中状态文字大小 36rpx
tab-image-height tab 图片高度 44rpx
tab-image-width tab 图片宽度 44rpx
tab-disabled-color tab 禁用状态文字颜色 #c9c9c9

注意

Group 分组容器