更新记录

1.0(2022-03-22)

20220322


平台兼容性

Vue2 Vue3
×
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 选中项的下标

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问