更新记录
1.0.3(2024-09-20)
下载此版本
更新文档
1.0.2(2024-09-20)
下载此版本
更新文档
1.0.1(2024-09-20)
下载此版本
更新文档
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
√ |
√ |
√ |
√ |
√ |
xz-tabBar
说明
自定义tabBar组件,支持中间图标凸起
使用方式
<xz-tabBar :list='tabBarList' pageIndex='0'></xz-tabBar>
tabBarList: [{
text: '文本',
pagePath: '路由地址',
icon: '默认图标',
selectIcon: '选中图标'
}
]
属性列表
属性名 |
是否必填 |
说明 |
类型 |
默认值 |
list |
是 |
tabBar列表,数组长度:1 < list.length <= 5 |
Array |
无 |
pageIndex |
是 |
当前page索引下标,以0作为起始坐标 |
String, Number |
无 |
mode |
否 |
tabBar模式;1:普通排列,2:中间凸起 |
String, Number |
1 |
jumpTo |
否 |
tabBar跳转方式,默认switchTab,不支持navigateBack |
String |
switchTab |
convexButtonStyle |
否 |
凸起按钮的样式 |
Object |
无 |
height |
否 |
tabBar高度(单位rpx) |
String, Number |
100 |
textSize |
否 |
tabBar文字大小(单位rpx) |
String, Number |
24 |
iconSize |
否 |
tabBar图标大小(单位rpx) |
String, Number |
40 |
background |
否 |
tabBar背景颜色 |
String |
#FFFFFF |
textColor |
否 |
tabBar未选中文字颜色 |
String |
#000000 |
selectTextColor |
否 |
tabBar选中文字颜色 |
String |
#000000 |
isFixedBottom |
否 |
是否固定在底部 |
Boolean |
true |
isSafeArea |
否 |
是否自适应底部安全区域 |
Boolean |
true |
customSafeAreaHeight |
否 |
自定义底部安全区域高度(单位rpx) |
String, Number |
0 |
isRepeatClick |
否 |
是否支持重复点击 |
Boolean |
false |
zIndex |
否 |
tabBar层级 |
String, Number |
10 |