更新记录
1.0.0(2022-07-08)
- 初版发布
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
√ |
√ |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
组件调用
<fast-tab></fast-tab>
props参数
参数名 |
说明 |
类型 |
默认 |
是否必填 |
list |
tab数据 |
Array |
[] |
是 |
activeIndex |
激活项的索引 |
Number |
0 |
是 |
label |
label字段 |
String |
label |
否 |
padding |
左右内边距 |
[Number,String] |
18rpx |
否 |
height |
组件高度 |
[Number,String] |
92rpx |
否 |
color |
默认颜色 |
String |
#16171C |
否 |
activeColor |
激活颜色 |
String |
#F22626 |
否 |
scale |
激活后的缩放倍数 |
Number |
1 |
否 |
flex |
flex全铺布局 |
Boolean |
false |
否 |
size |
字号 |
[Number,String] |
28rpx |
否 |
bold |
字号加粗 |
Boolean |
false |
否 |
lineWidth |
激活线的宽度 |
[Number,String] |
32rpx |
否 |
lineHeight |
激活线的高度 |
[Number,String] |
6rpx |
否 |
lineRadius |
激活线的圆角 |
[Number,String] |
6rpx |
否 |
lineBottom |
激活线距离底部的距离 |
[Number,String] |
0rpx |
否 |
事件
名称 |
说明 |
参数 |
on-change |
点击事件 |
【0】当前下标【1】当前数据 |
slot插槽
名称 |
说明 |
-- |
自定义激活线(lineWidth必传) |
例子
[view]
<fast-tab
:list="tabData"
:active-index.sync="activeIndex"
@on-change="change"
>
</fast-tab>
[script]
data(){
return{
tabData:[
{
label:"tab01"
},{
label:"tab02"
},{
label:"tab03"
},{
label:"tab04"
}
],
activeIndex:0
}
},
methods:{
change(key,item){
uni.showModal({
content:`当前索${key},当前数据${JSON.stringify(item)}`
})
}
},