mosowe-tab-card 卡片式tab栏

uniapp/uni_modules组件

下载地址

兼容性

平台	android	ios	微信小程序	H5
兼容	√	√	√	√

props

属性	类型	说明	默认
modelValue	number/string	v-model	0
list	listItem[]	列表	[]
hump	boolean	选中是否凸起	false
color	string	默认字体颜色	#3B3938
selectColor	string	选中字体颜色，默认加粗	#3B3938
bgColor	string	默认背景色	none
selectBgColor	string	选中背景色	#ffffff

listItem

属性	类型	说明
label	string	选项文案
value	string	选项值

emits

事件名	说明
click	选项点击事件

slots

插槽名	说明
default	选项插槽，作用域参数：{ item }

示例代码

<template>
    <view class="page-item">
      <mosowe-tab-card
        v-model="current"
        bgColor="#d9ecff"
        selectBgColor="#79bbff"
        hump
        :list="list"></mosowe-tab-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const current = ref(0);
const list = [
  {
    label: '选项一',
    value: 0
  },
  {
    label: '选项二',
    value: 1
  },
  {
    label: '选项三',
    value: 2
  }
];
</script>

贡献者

mosowe