更新记录
1.0(2022-03-22) 下载此版本
20220322
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
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 选中项的下标 |