更新记录
1.0.0(2025-04-28)
下载此版本
1.实现tabbar 头部切换
2.使用动态插槽实现内容切换
3.实现自定义tab功能
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.61 app-vue |
× |
√ |
√ |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
√ |
√ |
√ |
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>
```