Skip to content

底部导航栏组件

TIP

自定义

使用示例

html
<template>
  <hy-tabBar :list="list"></hy-tabBar>
</template>
javascript
import { IconConfig } from "hy-app";

const list = [
    { name: "首页", icon: IconConfig.HOME },
    { name: "分类", icon: IconConfig.HOME },
    { name: "购物车", icon: IconConfig.HOME, badge: 10 },
    { name: "我的", icon: IconConfig.HOME },
];

API

参数说明类型默认值
modelValuetab 当前值number0
list导航栏列表array-
color文字和图标颜色string-
baseBgColor底部背景颜色(颜色设置必须要和页面背景颜色一样,才有重合感觉)string-
barBgColor底部导航栏背景颜色string-
activeColor点击突出按钮的背景颜色string-
badge徽标属性集合HyBadgeProps-

list

参数说明类型默认值
nametabBar名称string-
iconicon图标或者图片string-
badge徽标值number-
10:00