Tabs 选项卡

手机扫码预览

13:03



---

组件名：rice-tabs

平台兼容性

uni-app x

Android	iOS	HarmonyOS	HarmonyOS(Vapor)	微信小程序	h5
√	√	√	√(1.1.0+)	√	√

基础用法

通过 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="activeIndex" :list="list" line-mode="zoom" />

文字缩放

<template>
  <rice-tabs :list="list" active-text-class="active-text-class2" disabled-text-class="disabled-text-class"
    text-class="text-class2" />
</template>

<style scoped lang="scss">
.text-class2 {
  transition: transform .2s;
}

.active-text-class2 {
  transform: scale(1.2);
}
.disabled-text-class {
  color: #52a8ff !important;
  opacity: .8;
}
  </style>

左右插槽

<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>

APIinitAnimate

Props

属性名	类型	说明	默认值
v-model /model-value	number	当前选中的索引	0
line-mode 1.1.0	String	下划线动画类型，可选 zoom 缩放模式	slide
list	TabsOptions[]	标签数组	-
init-animate 1.1.0	Boolean	初始化时是否展示动画 ,line-model 不为 zoom 时有效	true
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	菜单未选中时的样式,不支持设置字体的样式	-
text-class 1.1.0	String	字体的样式	-
active-text-class 1.1.0	String	激活时字体的样式	-
inactive-text-class 1.1.0	String	未激活时字体的样式	-
disabled-text-class 1.1.0	String	禁用时字体的样式	-
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)