更新记录
1.0(2022-03-22)
下载此版本
20220322
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
APP-TABS
插件说明
在插件市场找了一圈,适合微信小程序的tabs好像不是很多,插件市场找的插件动不动就报错,自己用最捞的办法写了一个
使用说明
- 基础使用
HTML部分
<app-tabs
:index="index"
:list="list"
:configStyle="config"
@onTab="onTab($event)"
</app-tabs>
JS部分
export default {
data() {
return {
index: 0,
list: ['军事', '国内'],
list2: [{name: '军事'}, {name: '国内'}]
}
},
methods: {
onTab(index) {
console.log('当前选中的项:' + index)
}
}
}
文档说明
1、属性说明
参数 |
类型 |
默认值 |
说明 |
value |
Number |
0 |
起始位置下标(非必传,也不是双向绑定) |
list |
Array |
[] |
显示的Array[<Object,...>] |
padding |
String |
'0' |
padding |
margin |
String |
'0' |
margin |
color |
String |
'black' |
文字颜色 |
activeColor |
String |
'black' |
选中时文字颜色 |
background |
String |
'black' |
背景颜色 |
activeBackground |
String |
'black' |
选中时背景颜色 |
fontLineHeight |
String |
'80rpx' |
文字行高 |
fontSize |
String |
'24rpx' |
默认文字大小(rpx 或 px) |
fontWeight |
Number |
400 |
默认文字粗细 |
--- |
--- |
--- |
--- |
lineBackground |
String |
transparent |
滑块默认颜色 透明 |
lineHeight |
String |
4rpx |
滑块高度 |
lineBottom |
String |
0rpx |
滑块默认底部距离 |
lineBorder |
String |
0rpx solid red |
滑块默认边框 |
borderRadius |
String |
4rpx |
滑块默认圆角 |
transition |
String |
0.3 |
滑块移动过渡时间 s |
translateY |
String |
-100% |
滑块Y轴偏移量 |
translateX |
String |
0 |
滑块X轴偏移量 |
scaleX |
String |
0.5 |
滑块X轴缩放 |
scaleY |
String |
1 |
滑块Y轴缩放 |
zIndex |
String |
98 |
滑块层级 |
2、事件说明
名称 |
参数 |
说明 |
onTab |
index |
改变选中项触发, index 选中项的下标 |