更新记录
1.0.0(2025-04-28)
下载此版本
1.实现tabbar 头部切换
2.使用动态插槽实现内容切换
3.实现自定义tab功能
平台兼容性
uni-app
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
√ |
× |
√ |
√ |
√ |
- |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
√ |
√ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
其他
tabbar 组件,支持横向滚动
uv-tabbar 组件,支持横向滚动
属性名 |
类型 |
默认值 |
说明 |
tabs |
Array |
非空 |
tab标签数据[{ label: "名称", value: "数据", icon: "图标" }] |
tabWidth |
String, Number |
150 |
tab 宽度 |
tabHeight |
String, Number |
72 |
tab 高度 |
lineWidth |
String, Number |
150 |
tab 下划线宽度 |
customTab |
Boolean |
false |
是否自定义tab,默认false,当为ture 时 customTab 插槽启用 |
showLineSlider |
Boolean |
false |
是否显示下划线 |
lineSliderColor |
Boolean |
red |
活动下划线颜色 |
value |
Number |
0 |
当前选中tab索引值 |
activeColor |
String |
#333333 |
当前选中tab 的字体颜色 |
inActiveColor |
String |
#BEBEBE |
未选中tab 的字体颜色 |
uv-tab 组件 tab内容组件
属性名 |
类型 |
默认值 |
说明 |
tab |
Object |
非空 |
tab标签数据{ label: "名称", value: "数据", icon: "图标" } |
tabWidth |
String, Number |
150 |
tab 宽度 |
tabHeight |
String, Number |
72 |
tab 高度 |
isActive |
Boolean |
true |
是否当选 true 是,false:否 |
activeColor |
String |
#333333 |
当前选中tab 的字体颜色 |
inActiveColor |
String |
#BEBEBE |
未选中tab 的字体颜色 |
使用方式,部分代码
```Vue
<u-tabbar ref="tabBar" :tabs="tabs" :tab-width="tabWidth" @tab-click="tabClick" :show-line-slider="true"
v-model="tabIndex">
</u-tabbar>
```