更新记录
1.1.1(2024-12-16)
下载此版本
新增其他 tabbar 样式
1.1.0(2024-12-16)
下载此版本
新增 tabbar 样式
1.0.0(2024-12-12)
下载此版本
sc-tabbar 特殊效果的 tabbar
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.0 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
√ |
× |
× |
√ |
× |
√ |
√ |
√ |
特殊效果的 tabbar
配置 easycom 组件模式
{
"easycom": {
"^sc-(.*)": "@/uni_modules/sc-tabbar/components/sc-tabbar-$1/sc-tabbar-$1.vue"
}
}
sc-tabbar-concave
数据格式
const list = [
{
text: '首页',
path: '/pages/index',
icon: '/static/tabbar/sy-2.png',
selectedIcon: '/static/tabbar/sy-1.png'
}
// ...
];
props 参数
属性 |
类型 |
默认值 |
说明 |
list |
Array |
- |
tabbar 的列表,列表长度为 2~5 个 |
circularColor |
Array |
#ffa500 |
中间圆形的背景色 |
textSize |
Number |
30 |
tabbar 文本的字体大小 (默认单位rpx) |
textColor |
String |
#666 |
tabbar 文本的激活颜色 |
activeTextColor |
String |
#666 |
tabbar 激活文本的颜色 |
iconSize |
Number |
60 |
tabbar icon 的大小 (默认单位rpx) |
current |
Number |
0 |
tabbar 当前选中的下标 |
autoJump |
Boolean |
false |
是否自动跳转,list 中需配置 path 字段 |
interceptor |
Function |
- |
切换拦截器,函数返回一个布尔值,返回 true 则切换,返回 false 则不切换 |
事件
事件名 |
说明 |
参数 |
change |
点击 tab 触发 |
{index ,item} index: tabbar 的索引 item: tabbar 的数据 |
sc-tabbar-bulge
数据格式
const list = [
{
text: '首页',
path: '/pages/index',
icon: '/static/tabbar/sy-2.png',
selectedIcon: '/static/tabbar/sy-1.png',
bulge: true // 配置为 true 则显示凸起效果
}
// ...
];
props 参数
属性 |
类型 |
默认值 |
说明 |
list |
Array |
- |
tabbar 的列表,列表长度为 2~5 个 |
bgColor |
String |
#fff |
tabbar 的背景色 |
circularColor |
String |
#07C160 |
中间圆形的背景色 |
circularIconSize |
Number |
60 |
中间圆形 icon 的大小 (默认单位rpx) |
textSize |
Number |
30 |
tabbar 文本的字体大小 (默认单位rpx) |
textColor |
String |
#666 |
tabbar 文本的激活颜色 |
activeTextColor |
String |
#07C160 |
tabbar 激活文本的颜色 |
iconSize |
Number |
50 |
tabbar icon 的大小 (默认单位rpx) |
current |
Number |
0 |
tabbar 当前选中的下标 |
autoJump |
Boolean |
false |
是否自动跳转,list 中需配置 path 字段 |
interceptor |
Function |
- |
切换拦截器,函数返回一个布尔值,返回 true 则切换,返回 false 则不切换 |
事件
事件名 |
说明 |
参数 |
change |
点击 tab 触发 |
{index ,item} index: tabbar 的索引 item: tabbar 的数据 |