更新记录
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
数据格式
const list = [
{
text: '首页',
icon: '/static/tabbar/sy-2.png',
selectedIcon: '/static/tabbar/sy-1.png'
},
{
text: '功能',
icon: '/static/tabbar/gn-2.png',
selectedIcon: '/static/tabbar/gn-1.png'
},
{
text: '喜欢',
icon: '/static/tabbar/xh-2.png',
selectedIcon: '/static/tabbar/xh-1.png'
}, {
text: '购物',
icon: '/static/tabbar/gwc-2.png',
selectedIcon: '/static/tabbar/gwc-1.png'
}, {
text: '我的',
icon: '/static/tabbar/wd-2.png',
selectedIcon: '/static/tabbar/wd-1.png'
}
];
props 参数
属性 |
类型 |
默认值 |
说明 |
list |
Array |
- |
tabbar 的列表, 数量为 3~5 个 |
textSize |
Number |
30rpx |
tabbar 文本的字体大小 |
textColor |
String |
#666 |
tabbar 文本的激活颜色 |
circularColor |
String |
#ffa500 |
tabbar 圆块的背景色 |
iconSize |
Number |
60rpx |
tabbar icon 的大小 |
activeIconSize |
Number |
60rpx |
tabbar 激活 icon 的大小 |
currentIndex |
Number |
0 |
tabbar 激活 index |
事件
事件名 |
说明 |
参数 |
change |
点击 tab 触发 |
{index ,item} index: tabbar 的索引 item: tabbar 的数据 |