Tabs 选项卡

预览

01:38



---

组件名：rice-tabs

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过 v-model 控制当前选中的tab

<rice-tabs v-model="activeIndex" :list="list" @clickTab="tabClick"></rice-tabs>
<script setup lang="ts">
import { TabsOptions, TabsClickTab, TabsChange } from '@/uni_modules/rice-ui';
const activeIndex = ref(0)
const list = ref<TabsOptions[]>([{
  name: '推荐',
  value: 'recommedn'
  }, {
  name: '关注',
  }, {
  name: '我的收藏',
  }, {
  name: '粉丝',
  }, {
  name: '电影',
  }, {
  name: '音乐',
  }, {
  name: '科技',
  }, {
  name: '美食节目',
  }, {
  name: '财经',
  }
])
const tabClick = (e : TabsClickTab) => {
  console.log('TabsClickTab', e)
  uni.showToast({
    title: `点击了：${e.name}${e.disabled ? '（禁用）' : ''}`,
    icon: 'none'
  })
}
</script>

显示徽标

<rice-tabs v-model="activeIndex2" :list="listBadge"></rice-tabs>
<script setup>
const listBadge = ref<TabsOptions[]>([{
  name: '推荐',
  badge: {
    isDot: true
  },
}, {
  name: '关注',
  badge: {
    value: 10,
  },
}, {
  name: '我的收藏',
  badge: {
    value: 999,
  },
}, {
  name: '粉丝',
}])
</script>

左右插槽

<rice-tabs v-model="activeIndex3" :list="list">
  <template #left>
    <view class="slot-left">
      <rice-icon name="scan" size="17px"></rice-icon>
    </view>
  </template>
  <template #right>
    <view class="slot-right">
      <rice-icon name="app" size="17px"></rice-icon>
    </view>
  </template>
</rice-tabs>

API

Props

属性名	类型	说明	默认值
v-model /model-value	number	当前选中的索引	0
list	TabsOptions[]	标签数组	-
bg-color	String	背景颜色	-
height	String|Number	高度	-
shrink	Boolean	是否开启收缩布局，开启后内容会向左收缩，默认false	-
title-active-color	String	选中时的文字颜色	-
title-inactive-color	String	未中时的文字颜色	-
line-color	String	滑块颜色	-
line-width	String|Number	滑块宽度，默认20px,设置为 0 就不显示滑块，设置为 '100%' 就是和内容区的宽度一致	-
line-height	String|Number	滑块高度，默认3px	-
item-style	Object	菜单item的样式	-
active-style	Object	菜单选中时的样式	-
inactive-style	Object	菜单未选中时的样式	-
custom-style	Object	自定义样式	-

Slot

名称	说明
left	左侧内容
right	右侧内容

类型定义

type TabsOptions = {
  name : string,
  value ?: string | number,
  disabled ?: boolean,
  badge ?: BadgeProps
}
type TabsClickTab = {
  index : number,
  name : string,
  value ?: string | number,
  disabled : boolean,
}
type TabsChange = {
  index : number,
  name : string,
  value ?: string | number,
  disabled : boolean,
}

组件导出如下类型

// 组件类型
const tabsRef = ref<RiceTabsComponentPublicInstance | null>(null)