更新记录
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 选中项的下标 |

收藏人数:
下载插件并导入HBuilderX
下载 31
赞赏 0
下载 11552440
赞赏 1813
赞赏
京公网安备:11010802035340号